正文
JavaScript：复选框事件的处理
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
复选框事件的处理
复选框本身也是多个组件的名字相同。所以在定义复选框的同事依然要使用document.all()取得全部的内容。
范例：操作复选框,要求是可以一个个去选择选项，也可以直接全选，全选按钮的状态根据选中的选项个数自动变化，即全选按钮的状态会自动取消或者自动勾选。
<!doctype html>
<html lang = "zh-CN">
<head> <meta charset="utf-8">
<meta name="description" content="this is a checkbox example">
<meta name="keywords" content="checkbox,html,js">
<title>复选框的测试</title> <script type="text/javascript">
window.onload = function () { //获取复选框元素
var checkbox = document.all('checkbox');
var checkall = document.getElementById('checkAll'); /*点击全选按钮全部选中的情况*/
checkall.addEventListener('click',function(){ if (checkbox.length == undefined) {//一个选项时
checkbox.checked = checkall.checked;
}else{
for (var i = 0; i < checkbox.length; i++) {//多个选项时
checkbox[i].checked = this.checked;
}
}
},false); //全部按钮什么时候被自动选中以及自动取消
if (checkbox.length == undefined) {//一个选项时
checkbox.addEventListener('click',function(){
checkall.checked = checkbox.checked;
},false);
}else{
for (var i = 0; i < checkbox.length; i++) {//多个选项时
checkbox[i].addEventListener('click',function(){
for (var i = 0; i < checkbox.length; i++){
if (!checkbox[i].checked) {
checkall.checked = false; //全选自动取消
break;
}else{
if (i == checkbox.length -1) { checkall.checked = true;}; //全选自动勾选
}
}
},false);
}
} //打印您所有的选择
document.getElementById('selecteBtn').addEventListener('click',function() { /*一个个去选择时的情况*/
var yourchoose = "您选择的爱好有：";
if (checkbox.length == undefined) {//一个选项时
if (checkbox.checked) yourchoose = yourchoose + checkbox.value;
}else{
for (var i = 0; i < checkbox.length; i++) {//多个选项时
if (checkbox[i].checked) yourchoose = yourchoose + checkbox[i].value + "、";
};
}
alert(yourchoose);
},false);
}
</script> </head>
<body>
<form action="">
您的爱好有:<br/>
<input type="checkbox" name="checkbox" id="checkbox" value="电影">电影<br/>
<input type="checkbox" name="checkbox" id="checkbox" value="音乐">音乐<br/>
<input type="checkbox" name="checkbox" id="checkbox" value="看书">看书<br/>
<input type="checkbox" name="checkbox" id="checkbox" value="打球">打球<br/>
<input type="checkbox" name="checkbox" id="checkbox" value="爬山">爬山<br/>
<input type="checkbox" name="checkbox" id="checkbox" value="游泳">游泳<br/>
<input type="checkbox" name="checkAll" id="checkAll" value="以上全部">以上全部<br/>
<input type="button" name="selecteBtn" id="selecteBtn" value="选择">
</form>
</body>
</html>
效果截图如下：
默认状态时：
没有全选时：
全选时：
