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

Posted 2023-03-05

【中文标题】如何使用jquery检查当前表单中的所有复选框？

【英文标题】：How to check all checkboxes in current form with jquery?

【发布时间】：2011-05-09 15:40:38

【问题描述】：

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

<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 中的所有复选框。

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

非常感谢

【问题讨论】：

无耻插件：查看我的jQuery CheckAll plugin（仍在处理文档）

【参考方案1】：

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

【讨论】：

如果我能收回最后一个半小时的谷歌搜索。

【参考方案2】：

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

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

【讨论】：

无需使用.is(':checked')，因为您只需检查复选框的.checked 属性即可。没有额外的 jQuery 调用

嗯，jQuery 很便宜。这不太可能成为瓶颈。

【参考方案3】：

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

【参考方案4】：

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

但是，您只需要一个 ID 为 select_all 的项目即可。如果您可以更改为select_all 的类，那么只需将# 替换为. 就可以了

【参考方案5】：

试试这个：

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

【讨论】：

还要确保你有一个“select_all”类而不是两个 ID。

这无济于事。问题是重复的 ID。然后它将选择 all 表单的 all 复选框。

是的，我在发布代码后意识到这一点。请查看第一个答案，它应该可以解决您的问题。

【参考方案6】：

您不能有两个具有相同 ID 的项目。 example

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;
        );

    );

);