摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JS實現(xiàn)復選框全選功能</title><style>.box{padding: 0;margin: 80px auto;width:300px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS實現(xiàn)復選框全選功能</title>
<style>
.box{
padding: 0;
margin: 80px auto;
width:300px;
border: 1px solid rgb(213, 223, 231);
border-radius: 5px 5px 0 0 ;
}
.box .ck{
height:40px;
color:#fff;
line-height: 20px;
background: rgba(18, 114, 192, .85);
border-radius: 5px 5px 0 0 ;
}
.ck input{
margin: 10px;
}
.cont input{
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="ck">
<input type="checkbox" id="all" onclick="check()">全選
</div>
<div class="cont">
<input type="checkbox" name="option[]">選項1<br>
<input type="checkbox" name="option[]">選項2<br>
<input type="checkbox" name="option[]">選項3<br>
<input type="checkbox" name="option[]">選項4<br>
</div>
</div>
<script>
function check() {
var checkall, item;
//獲取到全選復選框的元素
checkall = document.getElementById('all')
//獲取到下面子復選項框的元素
item = document.getElementsByName("option[]")
//根據(jù)全選框的狀態(tài)，用For循環(huán)檢查子復選項的狀態(tài)，實現(xiàn)全選功能
for (var i = 0; i < item.length; i++) {
if (checkall.checked) {
item[i].checked = true
} else {
item[i].checked = false
}
}
}
</script>
</body>
</html>
批改老師：西門大官人批改時間：2019-01-31 10:43:02
老師總結(jié)：代碼邏輯是正確的，但是還是要注意一下代碼的書寫的規(guī)范。每行代碼后面加上分號