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>