abstract： 步驟: 1.聲明這兩個變量 2.通過id定位到全選框和選框 3.并獲取到選框數(shù)組的長度用來決定循環(huán)的次數(shù) 4.利用for循環(huán)和if條件語句判斷,實現(xiàn)全選<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js實現(xiàn)全選框</t
步驟:
1.聲明這兩個變量
2.通過id定位到全選框和選框
3.并獲取到選框數(shù)組的長度用來決定循環(huán)的次數(shù)
4.利用for循環(huán)和if條件語句判斷,實現(xiàn)全選
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js實現(xiàn)全選框</title>
<style>
.box{
width: 120px;
padding: 20px;
border-radius: 6px;
background-color: #00a5e0;
color: #fff;
font-size: 16px;
}
#quan{
border-bottom:1px solid #fff;
margin-bottom: 10px;
padding-bottom: 10px;
}
.box div{
padding:5px 0;
}
</style>
</head>
<body>
<script>
function All() {
var all,item;
all=document.getElementById('all');
item = document.getElementsByName('item[]');
for(var i=0;i<item.length;i++){
if(all.checked){
item[i].checked=true;
}else{
item[i].checked=false;
}
}
}
</script>
<div>
<div id="quan">
<input type="checkbox" name="all" id="all" onclick="All()">
<label for="all">全選</label>
</div>
<div>
<input type="checkbox" name="item[]">
<label for="check">選擇1</label>
</div>
<div>
<input type="checkbox" name="item[]" >
<label for="check">選擇2</label>
</div>
<div>
<input type="checkbox" name="item[]" >
<label for="check">選擇3</label>
</div>
<div>
<input type="checkbox" name="item[]">
<label for="check">選擇4</label>
</div>
<div>
<input type="checkbox" name="item[]">
<label for="check">選擇5</label>
</div>
<div>
<input type="checkbox" name="item[]" id="check">
<label for="check">選擇6</label>
</div>
</div>
</body>
</html>
Correcting teacher：天蓬老師Correction time：2019-07-13 13:16:02
Teacher's summary：全選的實現(xiàn)方式有好幾種, 你的這種非常常用