2019-08-17 ...
2019-08-17
要求：
1.點擊全選按鈕時，所有的單擊按鈕全部被選中；取消時，單擊按鈕全部被取消。
2.全選按鈕選中時，取消任何一個單擊選項按鈕時，全選按鈕取消選中。
3.所有的單擊按鈕都選中時，全選按鈕自動選中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" name="all"/>全選<br />
<input type="checkbox" name="one"/>
<input type="checkbox" name="one"/>
<input type="checkbox" name="one"/>
<input type="checkbox" name="one"/>
<input type="checkbox" name="one"/>
<input type="checkbox" name="one"/>
<input type="checkbox" name="one"/>
<input type="checkbox" name="one"/>
<script type="text/javascript">
//獲取所有相關的元素
var all = document.getElementsByName("all")[0];
var one = document.getElementsByName("one");
//首先給全選按鈕綁定一個點擊事件
all.onclick = function(){
//然後遍歷所有的單擊按鈕
for (var i = 0; i < one.length; i++) {
one[i].checked = this.checked;
//當全選按鈕被選中時，所有的單擊按鈕也都被選中；當全選按鈕沒點擊時，所有單擊按鈕取消選中
}
}
</script>
</body>
</html>
運行後的效果如下：
