摘要:<!DOCTYPE html><html><head> <title>使用js全选</title> <style type="text/css"> .box{ height: 250px; width: 150px; &
<!DOCTYPE html>
<html>
<head>
<title>使用js全选</title>
<style type="text/css">
.box{
height: 250px;
width: 150px;
border: 1px solid #ccc;
margin: 20px auto;
}
.box div{
border-bottom:1px solid #ccc;
margin: 10px 0px;
}
.box input{
margin: 7px 5px;
}
</style>
</head>
<body>
<script type="text/javascript">
function cc(){
var ck,itm;
ck=document.getElementById('ckeckall');
itm=document.getElementsByName("item[]");
for(var i=0;i<itm.length;i++){
if (ck.checked) {
itm[i].checked=true;
}else{
itm[i].checked=false;
}
}
}
</script>
<div class="box">
<div>
<input type="checkbox" id="ckeckall" onclick="cc()"><label for="checkball">全选</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>
批改老师:灭绝师太批改时间:2019-02-16 17:44:31
老师总结:全选案例的使用场景较多,需要好好掌握,理解每一条语句的作用