摘要：<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>全選</title> &n
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>全選</title>
<style type="text/css">
.box{
width: 120px;
height: 230px;
border: 1px solid gray;
border-radius: 5px;
padding: 5px 10px;
margin: 20px auto;
}
.box input{
margin: 8px;
}
</style>
<script type="application/javascript">
function cecal() {
let cecal,item;
cecal = document.getElementById('cecal')//獲取全選
item = document.getElementsByName('item[]')//獲取下面單選框
// for 循環(huán)
// for (let i = 0; i < item.length; i++) {//獲取到長度6之后，開始循環(huán)，變量是從0開始
// if (cecal.checked){//判斷全選框是否被選中
// item[i].checked = true//當(dāng)全選被選中的時(shí)候，勾選下面的單選框
// } else {
// item[i].checked = false//反之
// }
// }
// while 循環(huán)
let x = 0;
while (x < item.length) {
if (cecal.checked){
item[x].checked = true//當(dāng)全選被選中的時(shí)候，勾選下面的單選框
} else {
item[x].checked = false//反之
}
x++;
}
}
</script>
</head>
<body>
<div class="box">
<div>
<input type="checkbox" id="cecal" onclick="cecal()"><label for="cecal">全選</label>
</div>
<hr>
<input type="checkbox" name="item[]" id="select1" value="select1"><label for="select1">選擇1</label><br>
<input type="checkbox" name="item[]" id="select2" value="select1"><label for="select2">選擇2</label><br>
<input type="checkbox" name="item[]" id="select3" value="select1"><label for="select3">選擇3</label><br>
<input type="checkbox" name="item[]" id="select4" value="select1"><label for="select4">選擇4</label><br>
<input type="checkbox" name="item[]" id="select5" value="select1"><label for="select5">選擇5</label><br>
<input type="checkbox" name="item[]" id="select6" value="select1"><label for="select6">選擇6</label><br>
</div>
</body>
</html>實(shí)現(xiàn)這個(gè)功能主要用到鼠標(biāo)點(diǎn)擊處理事件，onclick。
利用javaScript實(shí)現(xiàn)
首先獲取到全選的標(biāo)簽 和數(shù)組item[]標(biāo)簽
然后利用循環(huán)來判斷,獲取到item[]數(shù)組的長度(數(shù)組個(gè)數(shù))
依次對(duì)下面單選框進(jìn)行勾選或者取消勾選。
批改老師：查無此人批改時(shí)間：2019-04-26 13:31:23
老師總結(jié)：完成的不錯(cuò)。相信你現(xiàn)在對(duì)js有一定的了解了，繼續(xù)加油。