jQuery 计算使用 jQuery 的 HTML 复选框勾选数量

在本文中，我们将介绍如何使用 jQuery 计算 HTML 中被勾选的复选框数量，并给出相应的示例说明。

jQuery 选择器

要计算被勾选的复选框数量，我们首先需要使用 jQuery 选择器来选择所有的复选框元素。jQuery 选择器使用 CSS 选择器语法，可以非常方便地选择指定的元素。其中，复选框的选择器可以使用 :checkbox 或者 input[type="checkbox"]。

下面的例子会选择所有的复选框元素，并将它们存储在一个变量中：

var checkboxes = $(':checkbox');

这样，变量 checkboxes 就包含了页面中的所有复选框元素。

遍历和判断是否被勾选

接下来，我们可以使用 jQuery 的遍历方法和属性来判断哪些复选框被勾选了。

遍历方法

常用的遍历方法有 each() 和 forEach()。它们可以循环遍历所有的复选框元素，并执行相应的操作。

下面的例子演示了如何使用 each() 方法来遍历所有复选框元素，并判断是否被勾选：

var count = 0;
checkboxes.each(function() {
  if ($(this).is(':checked')) {
    count++;
  }
});
console.log('被勾选的复选框数量为：' + count);

上述代码中，我们使用一个计数器 count 来统计被勾选的复选框数量。在遍历复选框元素时，使用 is(':checked') 方法来判断当前复选框是否被勾选，如果是，则计数器加一。

属性的判断

除了使用遍历方法，我们还可以通过判断元素的属性来确定是否被勾选。对于复选框元素，使用 prop('checked') 方法可以获取它的勾选状态。

下面的例子演示了如何使用属性判断来计算被勾选的复选框数量：

var count = 0;
checkboxes.each(function() {
  if ($(this).prop('checked')) {
    count++;
  }
});
console.log('被勾选的复选框数量为：' + count);

示例说明

假设我们有一个网页，其中包含了一些复选框元素，可以用于选择我们喜欢的水果。我们希望计算被选中的水果数量。

HTML 代码如下：

<input type="checkbox" id="apple">
<label for="apple">苹果</label>
<br>
<input type="checkbox" id="banana">
<label for="banana">香蕉</label>
<br>
<input type="checkbox" id="orange">
<label for="orange">橙子</label>
<br>
<input type="checkbox" id="grape">
<label for="grape">葡萄</label>
<br>
<input type="checkbox" id="watermelon">
<label for="watermelon">西瓜</label>

使用 jQuery 的选择器和遍历方法，我们可以轻松地计算被选中的水果数量：

var checkboxes =  $('input[type="checkbox"]'); var count = 0; checkboxes.each(function() { if ($ (this).prop('checked')) {
    count++;
  }
});
console.log('被选中的水果数量为：' + count);

在上述例子中，我们首先选择了所有的复选框元素，并使用遍历方法循环遍历这些元素。在每次循环中，我们使用属性判断来判断当前复选框是否被选中，并将计数器加一。最终，输出计数结果即可。