如何使用jQuery计算页面上选中的复选框数量

Question

我想使用jQuery统计页面上有多少个复选框被选中。我已经编写了以下代码：

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

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

我该如何计算页面上选择了多少个复选框？

- Vivian River

Answer 1

jQuery支持:checked伪选择器，详见文档。

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

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

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

- Stephen

---

应该使用 input:checkbox 而不是仅使用 :checkbox，这样可以避免 jQuery 查看页面上的 所有 元素。 - user113716

Answer 2

尝试这个方法（避免计算任何选中的单选按钮）：

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

- Chandu

Answer 3

在 jQuery 的 each 回调函数中，传递给第一个参数的是索引而非元素。您应该使用this或者第二个参数来获取元素。

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

此外，更简单的方法是使用 :checked 选择器仅选择已选元素，然后检查所选内容的 length 属性。

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

- lonesomeday

Answer 4

$("input:checked").length

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

- derek

Answer 5

$('#myDIV').on('change', 'input[type="checkbox"]', function(){
  var $checkbox = $('#myDIV').find('input[type="checkbox"]')
    $count = 0,
    $counter = $('#myDIV').find('.counter');
  $checkbox.each(function() {
    if ($(this).is(':checked')) {
      $count++;
    }
  });
  $counter.text($count);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDIV">
  <label>
    <input type="checkbox"> label
  </label>
  <br>
  <label>
    <input type="checkbox"> label
  </label>
  <br>
  <label>
    <input type="checkbox"> label
  </label>
  <br>
  <label>
    <input type="checkbox"> label
  </label>
  <br>
  <span class="counter">0</span>
</div>

- Евгений Зимин

---

由于目前的回答不清楚，请编辑以添加更多细节，以帮助他人了解如何回答问题。您可以在帮助中心中找到有关如何撰写良好答案的更多信息。 - Community