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>

这实际上是一个分配oi被动态改变的数字所困，因为我是jquery的新手。

Answer 1

您的问题是您在页面加载后立即更新计数（在您有机会检查任何框之前发生这种情况，然后在您选中框时不会发生），而不是点击每个复选框后。

你问过这个问题的JQuery解决方案，但是要明白JQuery只是别人写的JavaScript。对于这样一个微不足道的问题，添加JQuery库确实没有增加任何价值 - 这个问题可以通过直接的JavaScript轻松解决。 JQuery今天肆无忌惮地过度使用。当它出现时，它比没有它的事情简单得多，但那是很久以前和今天，我们可以做很多基本的JQuery，就像没有它一样。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

$(":checkbox :checked")

这将获得数组中已选中的复选框如果您需要检查的长度，您可以$(":checkbox :checked").length

如果您只是执行$（“：checked”），您还可以选择下拉列表等。

所以你似乎有复选框部分;需要做的是你需要触发一个动作;你在javascript文件中抛出代码只运行一次。事件发生时调用触发器。 http://api.jquery.com/trigger/

因为我们要检查某些东西（除非你想把它绑在一个按钮上）你想在改变时调用它

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

使用areaForInput作为要附加的对象的id以及要检查的计数等

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

小提琴更新 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代码以检查是否选中了复选框，并指出选中的复选框数量是多少？

4 个答案: