如何使用 jQuery 计算页面上选择了多少个复选框答案

【问题标题】：How do I count how many checkboxes are selected on a page with jQuery如何使用 jQuery 计算页面上选择了多少个复选框
【发布时间】：2011-06-15 07:49:51
【问题描述】：

我想计算我的页面上使用 jQuery 选择了多少复选框。我写了以下代码：

      var numberOfCheckboxesSelected = 0;
      $(':checkbox').each(function(checkbox) {
          if (checkbox.attr('checked'))
              numberOfCheckboxesSelected++;
      });

但是，我的代码在第三行出现错误消息“对象不支持此属性或方法”。

如何计算我的页面上有多少复选框被选中？

【问题讨论】：

标签： javascript jquery checkbox css-selectors

【解决方案1】：

jQuery 支持:checked 伪选择器。

var n = $("input:checked").length;

这适用于单选按钮和复选框。如果您只想要复选框，但页面上还有单选按钮：

var n = $("input:checkbox:checked").length;

【讨论】：

您应该使用input:checkbox 而不仅仅是:checkbox，这样jQuery 就不会查看页面上的所有元素。

【解决方案2】：

试试这个（避免计算任何选定的单选按钮）：

var numberOfCheckboxesSelected = $('input[type=checkbox]:checked').length;

【讨论】：

【解决方案3】：

each 中传递给回调的第一个参数是索引，而不是元素。您应该使用this 或第二个参数：

$(':checkbox').each(function(idx, checkbox) {
      if (checkbox.attr('checked'))
          numberOfCheckboxesSelected++;
});

此外，更简单的方法是使用:checked 选择器仅选择选中的元素，然后检查选择的length 属性：

var numberOfCheckboxesSelected = $('input:checkbox:checked').length;

【讨论】：

【解决方案4】：

$("input:checked").length

这将返回选中复选框的计数。

【讨论】：