计算通过 JS 检查并显示在页面上的复选框总数

Question

我想显示用户在页面上选择的复选框总数。这是我的代码。

<input type="checkbox" name="fruit" />A
<input type="checkbox" name="fruit" />B
<input type="checkbox" name="fruit" />C

<p>Total Number of Items Selected = <p>  

请提供实现此目的所需的 javascript 代码。我知道以前有人问过这个问题，但我没有从这些答案中受益，因为他们要求我编辑 JS 代码以适应我的 HTML，而我目前无法做到这一点。

Answer 1

您可以使用 .querySelectorAll() 方法选择所有要定位的元素，然后使用 length 方法返回 cheched 元素的数量，例如：

document.querySelectorAll('input[name="fruit"]:checked').length;
_______________________________________________^^^^^^^ //Used to select just checked inputs

注意：名称选择器input[name="fruit"]的使用只针对所需的输入而不是所有文档checkbox。

使用 jQuery 的实时示例：

$('input[name="fruit"]').click(function() {
  console.log(document.querySelectorAll('input[name="fruit"]:checked').length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" name="fruit" />A
<input type="checkbox" name="fruit" />B
<input type="checkbox" name="fruit" />C

Answer 2

您可以使用查询选择器。

document.querySelectorAll("input:checked").length;

请注意，这将选中文档中的所有复选框。如果你只是想引用某一组复选框，则为组中的所有复选框赋予相同的名称，并像这样引用它们：

document.querySelectorAll("input[name='name']:checked").length;//replace 'name' with the name of the checkboxes

<input type="checkbox" name="fruit" />A
<input type="checkbox" name="fruit" />B
<input type="checkbox" name="fruit" />C

<p id="result">Total Number of Items Selected = <p>  
<script>
showChecked();
function showChecked(){
  document.getElementById("result").textContent = "Total Number of Items Selected = " + document.querySelectorAll("input:checked").length;
}
document.querySelectorAll("input[name=fruit]").forEach(i=>{
 i.onclick = function(){
  showChecked();
 }
});
</script>

Answer 3

虽然您请求了 JavaScript 解决方案，但这可以单独使用 CSS 来实现：

/* specifies the named counter that will be incremented by
   each checked check-box: */
input[type=checkbox]:checked {
  counter-increment: checked;
}

/* shows the counter in the '::after' pseudo-element of the
   sibling <p> element: */
p::after {
  content: ' ' counter(checked);
}

<input type="checkbox" name="fruit" />A
<input type="checkbox" name="fruit" />B
<input type="checkbox" name="fruit" />C

<p>Total Number of Items Selected =</p>