编写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 库确实没有任何价值 - 直接使用 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>

Answer 2

Js

<script>
$(function () {
    $(".chkBox").click(function () {
        $("#output").html($(".chkBox:checked").length)
    });
});
</script>

HTML

<input class="chkBox" type="checkbox" />Red
<input class="chkBox" type="checkbox" />Green
<input class="chkBox" type="checkbox" />Blue
<input class="chkBox" type="checkbox" />Black
<div>Number checked: <span id="output"></span></div>

Answer 3

$(":checkbox :checked") 

这会在数组中获取选中的复选框 如果你需要检查的长度，你可以做$(":checkbox :checked").length

如果你只是做 $(":checked") 你会得到下拉列表等的选择。

所以你似乎有复选框部分；需要做的是你需要触发一个动作；您将代码放入 javascript 文件中的位置仅运行一次。当事件发生时调用触发器。 http://api.jquery.com/trigger/

因为我们在检查某些东西时会经过（除非你想把它绑定到一个按钮 ofc） 你会想在改变时调用它

$(".checkbox").change(function() {
   $("#areaforInput").append($(":checkbox:checked").length)
});

areaForInput 是您要附加的对象的 id 以及检查等的计数

Answer 4

<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>

JS：

$(document).ready(function(){
  $("input[type=checkbox]").change(function(){
      $("#output").text($("input[type=checkbox]:checked").length);
   });
});

小提琴已更新 https://fiddle.jshell.net/riazxrazor/koo23g47/3/