编写jquery代码检查复选框是不是被选中并指示选中的复选框数量？

Posted 2023-05-09

【中文标题】编写jquery代码检查复选框是不是被选中并指示选中的复选框数量？

【英文标题】：Write jquery code to check if the check boxes are checked or not and indicate the number of check boxes checked?编写jquery代码检查复选框是否被选中并指示选中的复选框数量？

【发布时间】：2017-11-20 05:53:26

【问题描述】：

    $(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 的新手，所以我被动态变化的数字卡住了。

【问题讨论】：

在您的问题中发布代码，而不是屏幕截图。

发布您尝试过的代码，而不是链接。

$("input [type='checkbox']).length

@Jonasw 它不会工作

@Jonasw 这只会返回复选框的数量，而不是选中的复选框。请参阅下面的答案。

【参考方案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>

【讨论】：

您的答案绝对是“正确的”，但需要注意的一点是，这家伙确实要求提供 jquery 特定代码。

用 JQuery 标记的问题并不意味着答案必须在 JQuery 中。 JQuery 只是其他人编写的 JavaScript。没有理由将它用于像这样的琐碎问题。 JQuery 一直被过度使用，但“新手”并不知道更好，因为有人只是告诉他们使用它。这个问题也用 JQuery Plugins 标记。您会为此提供插件解决方案吗？

我只是同意这一点，因为我不想为 jquery 已经有效且高效的功能编写插件。然而，你提到的是非常真实的；我认识一个只知道 jquery 而根本不理解 javascript 的人，我想“等等......为什么你要寻找一个 jquery 数组，而你应该寻找一个 javascript 数组”

另外，请记住，JQuery 的 API 只是原生 JavaScript 和 DOM API 的包装，JQuery 不可能比直接的 JavaScript 更高效。

是的；我将 jquery 用于 ajax 之类的东西，只是为了节省我编写代码的时间。并且使用 4k 行代码的 jquery 文件，我认为没有人可以为此责怪我；但对于没有原生库的语言，我通常是一个纯粹主义者

【参考方案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>

【讨论】：

我需要的是它应该显示检查的数字：0 我应该使用隐藏方法吗？通过打印它

如果你只想得到数字，只需使用 $(".chkBox").click(function () var lengthCount = $(".chkBox:checked").length; );

【参考方案3】：

$(":checkbox :checked") 

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

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

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

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

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

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

【讨论】：

这是真的；但是有几个人会查找此内容，并且堆栈作为有关此信息的资源是非常宝贵的

嗯，这是一个很常见的问题......我们甚至不知道他尝试了多少

触摸@RiazLaskar；触摸

【参考方案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/

【讨论】：

opss...length 中有错字

我需要的是它应该显示检查的数字：0 我应该使用隐藏方法吗？第一次打印？

或者如果我取消选中所有框，它应该显示 0

你检查过小提琴吗？我认为是

是的，我怀疑即使在刷新我的页面时，跨度标签也必须显示 0，因为不会有任何复选框。为此，应该使用另一个标签标签来显示，然后在之后隐藏它?