如何使用jquery检查当前表单中的所有复选框？

Question

考虑这个简单的示例代码：

<form name="text" id="frm1" method="post">
  <input type="checkbox" name="name[]" value="1000"> Chk1<br>
  <input type="checkbox" name="name[]" value="1001"> Chk2<br>
  <input type="checkbox" name="name[]" value="1002"> Chk3<br>
  <input type="checkbox" name="name[]" value="1003"> Chk4<br>
  <input type="checkbox" id="select_all"/> Select All<br>  
</form>

<form name="text" id="frm2" method="post">
  <input type="checkbox" name="name[]" value="4000"> Chk1<br>
  <input type="checkbox" name="name[]" value="4001"> Chk2<br>
  <input type="checkbox" name="name[]" value="4002"> Chk3<br>
  <input type="checkbox" name="name[]" value="4003"> Chk4<br>
  <input type="checkbox" id="select_all"/> Select All<br>  

我试图让 Select All 在每个表单中工作（表单是在我的生产代码中动态生成的，并且具有不同的、不同的名称）

我正在使用这个 jquery 但 select_all 仅适用于第一个表单；它对第一个以下的表单没有影响。

$('#select_all').change(function() {
  var checkboxes = $(this).closest('form').find(':checkbox');
  if($(this).is(':checked')) {
      checkboxes.attr('checked', 'checked');
  } else {
      checkboxes.removeAttr('checked');
  }
});

我不知道如何检查表单 ID 中包含的任何 :checkbox 中的所有复选框。

有人能指出我正确的方向吗？

非常感谢

Answer 1

您有多个具有相同 ID 的元素，这是无效的 HTML，并导致了您所看到的问题。将 id="select_all" 更改为 class="select_all"，将 $('#select_all') 更改为 $('. select_all')，你应该没问题。

Answer 2

您有两个 id 为 select_all 的元素；这是不允许的。将其更改为一个类并尝试以下操作：

$('.select_all').change(function() {
  var checkboxes = $(this).closest('form').find(':checkbox');
  checkboxes.attr('checked', $(this).is(':checked'));
});

Answer 3

ID 是唯一的。你有两个。如果您想要多个元素，请使用 class="select_all" 和 $('.select_all')

Answer 4

$('#select_all').click(function() {
    $("input:checkbox", $(this).closest('form')).attr("checked", this.checked)
});

不过，您只需要一项 ID 为 select_all 的项目即可实现此功能。如果您可以更改为 select_all 类，那么只需将 # 替换为 . 就可以了

Answer 5

试试这个：

$("#select_all").click(function()               
        {
            var checked_status = this.checked;
            $("input[@name=name]").each(function()
            {
                this.checked = checked_status;
            });
        });

Answer 6

您不能拥有两个具有相同 ID 的项目。
示例

html:

<form name="text" id="frm1" method="post">
  <input type="checkbox" name="name[]" value="1000"> Chk1<br>
  <input type="checkbox" name="name[]" value="1001"> Chk2<br>
  <input type="checkbox" name="name[]" value="1002"> Chk3<br>
  <input type="checkbox" name="name[]" value="1003"> Chk4<br>
  <input type="checkbox" id="select_all_1"/> Select All<br>  
</form>

<form name="text" id="frm2" method="post">
  <input type="checkbox" name="name[]" value="4000"> Chk1<br>
  <input type="checkbox" name="name[]" value="4001"> Chk2<br>
  <input type="checkbox" name="name[]" value="4002"> Chk3<br>
  <input type="checkbox" name="name[]" value="4003"> Chk4<br>
  <input type="checkbox" id="select_all_2"/> Select All<br>  
</form>

JS:

$(function() {

    $('#select_all_1, #select_all_2').bind('click', function(event) {

        var 
            ref = this,
            refChecked = this.checked;

        $(this.form).find('input[type="checkbox"]').each(function(i, el) {
            if(this != ref)
              this.checked = refChecked;
        });

    });

});