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方法，该方法将返回诸如以下元素的数量：

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

您可以使用querySelector。

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>

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

3 个答案: