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

$(":checkbox :checked")

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

如果您只执行 $(":checked")，您还可以选择下拉列表等。

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

因为我们在检查某些内容时经过（除非您想将其绑定到按钮 ofc）你会想在改变时调用它

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

areaForInput 是您要附加检查计数的对象的 ID 等

Answer 2

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

您要求 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 3

<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);
   });
});

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

Answer 4

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>

编写jquery代码检查复选框是否被选中，并指出选中的复选框数？

Write jquery code to check if the check boxes are checked or not and indicate the number of check boxes checked?

html

javascript

css

jquery

jquery-plugins