
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实现全选/全不选/反选</title>
<script type="text/javascript">
window.onload=function(){
//获取3个按钮的dom对象
var oall = document.getElementById("all");
var oallNot = document.getElementById("allNot");
var oreverse = document.getElementById("reverse");
//获取复选框对象
var odiv = document.getElementById("ch_div");
//获取子元素=数组
var och = odiv.children;
console.log(och);
//绑定事件
//全选
oall.onclick=function(){
//循环数组,添加checked
for (var i = 0; i < och.length; i++) {
//对属性操作:
//1.checked = true;选中
//2.checked = false;不选中
och[i].checked = true;
}
}
//全不选
oallNot.onclick=function(){
//循环数组,添加checked
for (var i = 0; i < och.length; i++) {
//对属性操作:
//1.checked = true;选中
//2.checked = false;不选中
och[i].checked = false;
}
}
//反选
oreverse.onclick=function(){
//循环数组,添加checked
for (var i = 0; i < och.length; i++) {
//反选
och[i].checked = !och[i].checked;
}
}
}
</script>
</head>
<body>
<form action="#">
<div id="ch_div">
<!--!checked:不选 checked:选择 -->
<input type="checkbox" name="" id="" />吃饭
<input type="checkbox" name="" id="" />睡觉
<input type="checkbox" name="" id="" />打代码
</div>
<div>
<input type="button" value="全选" id="all"/>
<input type="button" value="全不选" id="allNot"/>
<input type="button" value="反选" id="reverse"/>
</div>
</form>
</body>
</html>