abstract：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表全選練習(xí)</title>
<style>
.box{width: 120px;height:200px; border: 1px solid#ccc;border-radius: 5px 10px; margin: 20px auto}
</style>
</head>
<body>
<div class="box">
<div>
<input type="checkbox" id="chenckall" onclick="chenckall()"><label for="checkall" >全選<hr></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>
<script type="text/javascript">
function chenckall(){ //方法名
var x=document.getElementById("chenckall");//ID選中
var y=document.getElementsByName("item[]"); //名稱選中
for (var i=0;i<y.length;i++){ //創(chuàng)建循環(huán)勾選
if(x.checked){ //全選當(dāng)前選中狀態(tài)
y[i].checked=true; //選中為真
}else{ //否則
y[i].checked=false; //選中為假
}
}
}
</script>
</html>
Correcting teacher：滅絕師太Correction time：2019-01-25 17:12:19
Teacher's summary：全選案例后期還是用的比較多的，需要好好掌握