如何使用Javascript计算已选中的复选框？
[英]How to count checked checkbox with Javascript?
问题描述
I would like to count the checkboxes that are checked and display the count in the Div. 
我想对选中的复选框进行计数，并在Div中显示计数。
Here is my HTML : 这是我的HTML：
<form name="liste_figurine" method="post">
<input type="checkbox" id="radio-1" class="z" name="chck1[]" onclick="updateCount()" />
<input type="checkbox" id="radio-2" class="z" name="chck2[]" onclick="updateCount()" />
</form>
<div id="y"></div>
Here is my JS : 这是我的JS：
function updateCount {
var x = $(".z:checked").length;
document.getElementById("y").innerHTML = x;
};
Here is an exemple : https://jsfiddle.net/r3todbs6/3/ 这是一个例子： https : //jsfiddle.net/r3todbs6/3/
Sorry, I'm not really used to JS... What is wrong with my code ? 抱歉，我不太习惯JS ...我的代码有什么问题？
Finally, it's working but I have one last issue : the onclick must contain 2 functions and I don't manage to make them working together. 最后，它正在工作，但是我还有最后一个问题： onclick必须包含2个函数，但我无法使它们一起工作。
Now this function works, alone : onclick="updateCount()" 现在，此函数可以单独使用： onclick="updateCount()"
This other function works also, alone : onclick="document.getElementById(\\'radio-'.$ligne['id'].'-2\\').checked = false" 此功能也可以单独使用： onclick="document.getElementById(\\'radio-'.$ligne['id'].'-2\\').checked = false"
But these two functions doesn't work, together : onclick="updateCount(); fx2(document.getElementById(\\'radio-'.$ligne['id'].'-1\\').checked = false);" 但是这两个函数不能一起使用： onclick="updateCount(); fx2(document.getElementById(\\'radio-'.$ligne['id'].'-1\\').checked = false);"
What is wrong with the third proposition ? 第三个命题有什么问题？ Is it a syntax error ? 这是语法错误吗？
5 个解决方案
解决方案1
2 已采纳 2017-03-30 00:12:59
window.updateCount = function() {
var x = $(".z:checked").length;
document.getElementById("y").innerHTML = x;
};
https://jsfiddle.net/73yfczcj/ https://jsfiddle.net/73yfczcj/
try this. 尝试这个。 you have to use jquery in javascript setting. 您必须在JavaScript设置中使用jquery。
解决方案2
0 2017-03-30 00:05:15
Use length 使用长度
function updateCount(){
var x = $("input:checked").length;
$("#y").html(x);
};
解决方案3
0 2017-03-30 00:11:11
There are three issues for your Fiddle code: 您的Fiddle代码存在三个问题：
- As others have mentioned, it should be
length, notsize().正如其他人提到的，它应该是length，而不是size()。 - You should change the JavaScript setting -> Load type to "No wrap - in
<head>".您应该将JavaScript设置->加载类型更改为“ No wrap-in <head>”。 Otherwise,updateCountis not defined in global scope.否则，未在全局范围内定义updateCount。 - You need to configure Fiddle to use jQuery if you use your original code. 如果您使用原始代码，则需要将Fiddle配置为使用jQuery。
A working example: https://jsfiddle.net/c5ez4w7y/ 一个有效的示例： https ： //jsfiddle.net/c5ez4w7y/
解决方案4
0 2017-03-30 00:11:47
function updateCount {
var x = document.querySelector('.z:checked').length;
document.getElementById("y").innerHTML = x;
};
try this fuction if you don't want to use jQuery 如果您不想使用jQuery，请尝试此功能
解决方案5
0 2017-03-30 03:18:50
The answer provided by kangsu is the best answer but here is how I did it. kangsu提供的答案是最好的答案，但这是我的做法。
var form = document.getElementById('form'); var checkBoxes = $(form).children('.checkbox'); var count = 0; var divBoxesChecked = document.getElementById('boxesChecked'); divBoxesChecked.innerHTML = 0; $(checkBoxes).on('click', function() { $.each(checkBoxes, function(i) { if (checkBoxes[i].checked) { count++; } }); console.log(count); divBoxesChecked.innerHTML = count; count = 0; });
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <form id="form" method="post"> <input type="checkbox" id="box_01" class="checkbox" name="box_01" /> <label>Box 1</label> <input type="checkbox" id="box_02" class="checkbox" name="box_02" /> <label>Box 2</label> <input type="checkbox" id="box_03" class="checkbox" name="box_03" /> <label>Box 3</label> </form> <div id="boxesChecked"></div>
Basically, every time one of the boxes is clicked it counts how many boxes are checked in total and prints that out to the div and the console, then it resets the counter to zero since it re-counts all of the checked boxes every time you click on one. 基本上，每次单击其中一个框时，它都会计算总共检查了多少框，并将其打印到div和控制台中，然后将计数器重置为零，因为每次您重新计数所有复选框时，单击一个。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.