javascript - 编写 jquery 代码来检查复选框是否被选中并指示选中的复选框数？

Question

    $(document).ready(function(){
        
            
             var numberOfChecked = $('input:checkbox:checked').length;
              	//alert(numberOfChecked);		  
           // document.write(numberOfChecked);
        
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="checkbox"/><lable>Red</lable></td>
<td><input type="checkbox"/><lable>Green</lable></td>
<td><input type="checkbox"/><lable>Blue</lable></td>
<td><input type="checkbox"/><lable>Black</lable></td>
</tr>
</table>
<p id="dem"></p>

这实际上是一个作业，因为我是 jquery 的新手，所以我被动态变化的数字卡住了。

Answer 1

您的问题是您在页面加载后立即更新计数(这发生在您有机会选中任何框之前，然后当您选中一个框时不会发生)，而不是在每次加载之后复选框被点击。

您要求使用 JQuery 解决此问题，但请理解 JQuery 只是其他人编写的 JavaScript。对于这样一个微不足道的问题，添加 JQuery 库确实没有任何值(value)——直接使用 JavaScript 即可轻松解决该问题。今天，JQuery 被过度使用。当它问世时，它比没有它的情况下做事要简单得多，但那是很久以前的事了，今天，我们可以像没有它一样简单地完成 JQuery 的许多基础知识。

// Get all the checkboxes into an array
var boxes = Array.prototype.slice.call(document.querySelectorAll("input[type=checkbox]"));

// Get reference to output span
var output = document.getElementById("output");

// Loop through all the checkboxes
boxes.forEach(function(box){
  // Set up click event handlers on each
  box.addEventListener("change", function(){
    // Update the output area with the number of checked checkboxes
    output.textContent = document.querySelectorAll("input[type=checkbox]:checked").length;
  });
});

<input type="checkbox"> Box 1
<input type="checkbox"> Box 2
<input type="checkbox"> Box 3
<input type="checkbox"> Box 4
<div>Number checked: <span id="output"></span></div>

如果你觉得你真的想要一个 JQuery 解决方案，这就是它的样子:

$(function(){
  $("input[type=checkbox]").on("change", function(){
     var numberOfChecked = $('input:checkbox:checked').length; 
     $("#dem").text(numberOfChecked);  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="checkbox"/><lable>Red</lable></td>
<td><input type="checkbox"/><lable>Green</lable></td>
<td><input type="checkbox"/><lable>Blue</lable></td>
<td><input type="checkbox"/><lable>Black</lable></td>
</tr>
</table>
<p id="dem"></p>