JavaScript动态显示复选框选中个数
程序员文章站
2022-06-22 16:48:16
JavaScript动态显示复选框选中个数直接上代码:JS动态显示选中个数 - 开红大大
JavaScript动态显示复选框选中个数
预览图:
直接上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS动态显示选中个数 - 开红大大</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.js"></script>
</head>
<body>
<div style="height:40px; line-height:40px;" id="getCheckboxNum">
<label><input id="mok" type="checkbox" value="0" />第一个</label>
<label><input type="checkbox" id="mok" value="1"/>第二个</label>
<label><input type="checkbox" value="2" />第三个</label>
<label><input type="checkbox" value="3" />第四个</label>
<label><input type="checkbox" value="4" />第五个</label>
<label><input type="checkbox" value="5" />第六个</label>
</div>
当前共选中<span id="num">0</span>个
<script type="text/javascript">
$(function(){
//获取当前ID下的input个数
var inputs = document.getElementById("getCheckboxNum").getElementsByTagName("input");
console.log(inputs.length);
//循环给input绑定点击事件
for (var i=0;i<inputs.length;i++){
inputs[i].onclick = function(){
var total = 0;
//每点击一次yangshi下的input就循环遍历一次当前yangshi下等于checked的个数
for (var j=0;j<inputs.length;j++){
if(eval("inputs[" + j + "].checked") == true){
total = total+1;//得到选中个数
}
}
document.getElementById("num").innerText=total;//输出到文本
}
}
});
</script>
</body>
</html>
本文地址:https://blog.csdn.net/lichao0525/article/details/112590711
上一篇: class和public class
下一篇: 应用容器化
推荐阅读
-
jquery统计用户选中的复选框的个数
-
javascript判断单选框或复选框是否选中方法集锦
-
jquery css类javascript如何获取checkbox复选框选中项的值
-
jquery css类javascript如何获取checkbox复选框选中项的值
-
javascript判断单选框或复选框是否选中方法集锦
-
JavaScript动态显示复选框选中个数
-
JavaScript限定复选框的选择个数示例代码_javascript技巧
-
javascript获取checkbox复选框获取选中的选项_javascript技巧
-
JavaScript限定复选框的选择个数示例代码_javascript技巧
-
JQuery限制复选框checkbox可选中个数的方法_jquery