2019-08-17
要求：
1.点击全选按钮时，所有的单击按钮全部被选中；取消时，单击按钮全部被取消。
2.全选按钮选中时，取消任何一个单击选项按钮时，全选按钮取消选中。
3.所有的单击按钮都选中时，全选按钮自动选中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" name="all"/>全选<br />
<input type="checkbox" name="one"/>
<input type="checkbox" name="one"/>
<input type="checkbox" name="one"/>
<input type="checkbox" name="one"/>
<input type="checkbox" name="one"/>
<input type="checkbox" name="one"/>
<input type="checkbox" name="one"/>
<input type="checkbox" name="one"/>
<script type="text/java script">
//获取所有相关的元素
var all = document.getElementsByName("all")[0]; var one = document.getElementsByName("one"); //首先给全选按钮绑定一个点击事件
all.onclick = function(){ //然后遍历所有的单击按钮
for (var i = 0; i < one.length; i++) { one[i].checked = this.checked; //当全选按钮被选中时，所有的单击按钮也都被选中；当全选按钮没点击时，所有单击按钮取消选中
} } //接着给所有的单击按钮one注册一个单击事件
for (var i = 0; i < one.length; i++) {//先遍历所有的单击按钮
one[i].onclick = function(){ for(var j = 0; j < one.length; j++){ //判断是否所有的one都被选中了 //只要有一个没有被选中
if(!one[j].checked){//只要程序到这里执行，说明最少有一个没有被选中
all.checked = false;//只要执行了，程序不需要再往下遍历。
return; } } //当所有的单击按钮都选中时，此时全选按钮也被选中
all.checked = true; } } </script>
</body>
</html>
运行后的效果如下：
