如何使用 jQuery 选择所有复选框？

Posted

技术标签:

【中文标题】如何使用 jQuery 选择所有复选框？【英文标题】：How to select all checkboxes with jQuery? 【发布时间】：2011-01-14 18:19:16 【问题描述】：

我需要有关 jQuery 选择器的帮助。假设我有一个如下所示的标记：

<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>

当用户点击它时，如何获取除#select_all之外的所有复选框？

【问题讨论】：

这里是codepen.io/nickhq/pen/pZJVErcodepen 的链接 【参考方案1】：

一个更完整的示例应该适用于您的情况：

$('#select_all').change(function() 
  var checkboxes = $(this).closest('form').find(':checkbox');
  checkboxes.prop('checked', $(this).is(':checked'));
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>

当#select_all复选框被点击时，复选框的状态被选中，当前表单中的所有复选框都设置为相同状态。

请注意，您无需从选择中排除#select_all 复选框，因为它的状态与所有其他复选框相同。如果你出于某种原因确实需要排除#select_all，你可以使用这个：

$('#select_all').change(function() 
  var checkboxes = $(this).closest('form').find(':checkbox').not($(this));
  checkboxes.prop('checked', $(this).is(':checked'));
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>

【讨论】：

对我来说，这只是第一次工作（即，选中所有，取消选中所有）。在第二个“检查所有”中，没有检查任何其他复选框。我使用checkboxes.prop('checked', true); 和checkboxes.prop('checked', false); 代替，来自this answer。糟糕，刚刚意识到页面下方的答案中提到了这一点...... jQuery documentation 声明$( "[type=checkbox]" ) 对于现代浏览器来说更快（比$(':checkbox') 更快）。【参考方案2】：

简单干净：

$('#select_all').click(function() 
  var c = this.checked;
  $(':checkbox').prop('checked', c);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>

【讨论】：

这个也可以这样...$(':checkbox').prop('checked', this.checked); 微妙 - 将检索到的复选框的选中状态设置为与我们最近修改的“主”复选框相同 - 简单、优雅且令人惊讶地合乎逻辑 - 谢谢！【参考方案3】：

由于 attr() 方法，最佳答案在 Jquery 1.9+ 中不起作用。使用 prop() 代替：

$(function() 
    $('#select_all').change(function()
        var checkboxes = $(this).closest('form').find(':checkbox');
        if($(this).prop('checked')) 
          checkboxes.prop('checked', true);
         else 
          checkboxes.prop('checked', false);
        
    );
);

【讨论】：

谢谢你，我在 JQuery 1.8.3 中使用了你的实现 ;-) OP 修改了答案以应对“最近”的变化 :)【参考方案4】： 
$("form input[type='checkbox']").attr( "checked" , true );

或者你可以使用

:checkbox Selector

$("form input:checkbox").attr( "checked" , true );

我已经重写了你的 html 并为主复选框提供了一个点击处理程序

$(function()
    $("#select_all").click( function() 
        $("#frm1 input[type='checkbox'].child").attr( "checked", $(this).attr("checked" ) );
    );
);

<form id="frm1">
    <table>
        <tr>
            <td>
                <input type="checkbox" id="select_all" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
    </table>
</form>

【讨论】：

请注意不要选中页面上的每个复选框... :) 其实正确的语法是.attr("checked", "checked")。 +1 谢谢 rahul，但是当用户单击#select_all 复选框时，我需要找到所有复选框。【参考方案5】： 
 $(function()   
$('#select_all').click(function() 
    var checkboxes = $(this).closest('form').find(':checkbox');
    if($(this).is(':checked')) 
        checkboxes.attr('checked', 'checked');
     else 
        checkboxes.removeAttr('checked');
    
);
    );

【讨论】：

【参考方案6】： 
 $(document).ready(function()
    $("#select_all").click(function()
      var checked_status = this.checked;
      $("input[name='select[]']").each(function()
        this.checked = checked_status;
      );
    );
  );

【讨论】：

【参考方案7】： 
jQuery(document).ready(function () 
        jQuery('.select-all').on('change', function () 
            if (jQuery(this).is(':checked')) 
                jQuery('input.class-name').each(function () 
                    this.checked = true;
                );
             else 
                jQuery('input.class-name').each(function () 
                    this.checked = false;
                );
            
        );
    );

【讨论】：

代码很棒，但总是欢迎解释为什么它有帮助。【参考方案8】：

这段代码很适合我

<script type="text/javascript">
$(document).ready(function() 
$("#select_all").change(function()
  $(".checkbox_class").prop("checked", $(this).prop("checked"));
  );
);
</script>

您只需将类 checkbox_class 添加到所有复选框

简单易行：D

【讨论】：

【参考方案9】： 
$("#select_all").change(function () 

    $('input[type="checkbox"]').prop("checked", $(this).prop("checked"));

);

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。【参考方案10】：

面对问题，以上答案都行不通。原因在于 jQuery Uniform 插件（与 theme metronic 一起使用）。我希望答案有用:)

使用 jQuery 统一

$('#select-all').change(function() 
    var $this = $(this);
    var $checkboxes = $this.closest('form')
        .find(':checkbox');

    $checkboxes.prop('checked', $this.is(':checked'))
        .not($this)
        .change();
);

【讨论】：

【参考方案11】：

一个复选框来统治所有这些

对于仍在寻找通过轻量级插件来控制复选框的人，具有对 UniformJS 和 iCheck 的开箱即用支持，并且在至少一个受控复选框未选中时未选中（并在所有受控复选框时选中当然会检查）我创建了一个jQuery checkAll plugin。

请随时查看documentation page 上的示例。

对于这个问题示例，您需要做的就是：

$( '#select_all' ).checkall(
    target: 'input[type="checkbox"][name="select"]'
);

这不是很简单吗？

【讨论】：

【参考方案12】： 
$('.checkall').change(function() 
    var checkboxes = $(this).closest('table').find('td').find(':checkbox');
    if($(this).is(':checked')) 
        checkboxes.attr('checked', 'checked');
     else 
        checkboxes.removeAttr('checked');
    
);

【讨论】：

【参考方案13】： 
  $("#select_all").live("click", function()
            $("input").prop("checked", $(this).prop("checked"));
    
  );

【讨论】：

添加一些解释/评论【参考方案14】：

我现在偏爱这种风格。

我已为您的表单命名，并在您的 select_all 框中添加了一个“onClick”。

我还从 jquery 选择器中排除了“select_all”复选框，以防止有人点击它时互联网爆炸。 

 function toggleSelect(formname) 
   // select the form with the name 'formname', 
   // then all the checkboxes named 'select[]'
   // then 'click' them
   $('form[name='+formname+'] :checkbox[name="select[]"]').click()
 

 <form name="myform">
   <tr>
        <td><input type="checkbox" id="select_all"    
                   onClick="toggleSelect('myform')" />
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="select[]"/></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="select[]"/></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="select[]"/></td>
    </tr>
</table>

【讨论】：

【参考方案15】：

这是我编写的一个基本的 jQuery 插件，它选择页面上的所有复选框，除了要用作切换的复选框/元素：

(function($) 
    // Checkbox toggle function for selecting all checkboxes on the page
    $.fn.toggleCheckboxes = function() 
        // Get all checkbox elements
        checkboxes = $(':checkbox').not(this);

        // Check if the checkboxes are checked/unchecked and if so uncheck/check them
        if(this.is(':checked')) 
            checkboxes.prop('checked', true);
         else 
            checkboxes.prop('checked', false);
        
    
(jQuery));

然后只需调用复选框或按钮元素上的函数：

// Check all checkboxes
$('.check-all').change(function() 
    $(this).toggleCheckboxes();
);

【讨论】：

以上是关于如何使用 jQuery 选择所有复选框？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用jQuery更新数据表中的所有多行？

如何使用 jQuery 检查所有复选框？

如何使用 jQuery 使用按钮选中/取消选中所有复选框？

如何使用 jQuery DataTables 和复选框作为行选择器访问列元素数据

如何获得带有选择/取消选择所有功能和不确定值的 angular.js 复选框？

如何使用jQuery获取所有选中复选框的值