摘要:先获取全选复选框dom对象和复选框组的dom对象列表,然后for循环遍历复选组,在循环体中判断全选框的选中的状态,给每次循环到复选组中的对象的属性checked设置值代码如下:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>全选&l
先获取全选复选框dom对象和复选框组的dom对象列表,然后for循环遍历复选组,在循环体中判断全选框的选中的状态,给每次循环到复选组中的对象的属性checked设置值
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选</title>
<style type="text/css">
.box{width: 120px;margin:20px auto;border:1px solid #ccc;border-radius: 2px;padding: 10px 10px;}
.box div{border-bottom: 1px solid #ccc;}
.box input{margin:8px 4px;}
</style>
<script type="text/javascript">
function checkAll(){
var checkAll,items
checkAll = document.getElementById("checkAll");//获取全选框
items = document.getElementsByName('item[]');//获取选框组
for(var i=0;i<items.length;i++){
if(checkAll.checked){
items[i].checked = true;//如果全选框是选中状态,则复选框组中的对象设置其为选中
}else{
items[i].checked = false;//反之,则设置复选框组中的对象为不选中状态
}
}
}
</script>
</head>
<body>
<div>
<div>
<input type="checkbox" id="checkAll" onclick="checkAll()"><label for="checkAll">全选</label>
</div>
<input type="checkbox" name="item[]">选项1<br>
<input type="checkbox" name="item[]">选项2<br>
<input type="checkbox" name="item[]">选项3<br>
<input type="checkbox" name="item[]">选项4<br>
<input type="checkbox" name="item[]">选项5<br>
<input type="checkbox" name="item[]">选项6<br>
</div>
</body>
</html>
批改老师:天蓬老师批改时间:2018-11-12 14:04:23
老师总结:下次提交的时候,附一张执行效果图.
还有,作业 ,可以只提交关键代码即可