abstract：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>js全選練習</title><script type="text/javascript">window.onload = function() {var btn =
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js全選練習</title>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById("all");
btn.onclick = function() {
var flag = this.checked;
var items = document.getElementsByName("ckbx");
for (var i = 0; i < items.length; i++) {
items[i].checked = flag;//將所有item的狀態(tài)設為全選按鈕的狀態(tài)
}
}
var items = document.getElementsByName("ckbx");
for (var i = 0; i < items.length; i++) {
items[i].onclick = function() {//對每個item設置點擊
var number = 0;//記錄選中的個數(shù)
for (var j = 0; j < items.length; j++) {
if (items[j].checked) {
number++;
}
}
document.getElementById("all").checked = (items.length == number);
}
}
}
</script>
</head>
<body>
功能描述：點擊全選，全部選中，再次點擊全部不選，ckbx全部選中全選也選中，有一個沒選全選不選
<br />
<input type="checkbox" id="all" />全選/全不選
<br />
<input type="checkbox" name="ckbx" />讀書
<input type="checkbox" name="ckbx" />看報
<input type="checkbox" name="ckbx" />游泳
<input type="checkbox" name="ckbx" />寫字
<input type="checkbox" name="ckbx" />上課
</body>
</html>
Correcting teacher：韋小寶Correction time：2019-02-23 11:58:31
Teacher's summary：全選在實際的開發(fā)中不管是網(wǎng)站的前臺還是網(wǎng)站的后臺使用的次數(shù)都很多 所以一定要好好掌握!