通過上期【JavaScript】DOM和事件簡介和文檔加載流程以及DOM查詢(上)案例（附源碼）再接一個全選小練習。
實作效果：
【JavaScript】DOM查詢之全選練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>.onload = function(){
//找到所有元素
var items = document.getElementsByName('item');
//全選和全不選的按鈕
var checkAll = document.getElementById('checkAll');
//給全選框添加單擊事件函數
document.getElementById('checkAllBtn').onclick = function(){
//找到所有元素
for(var i = 0; i<items.length; i ++){
items[i].checked = true;
}
checkAll.checked = true;
}
//給全不選框添加單擊事件函數
document.getElementById('checkAllNoBtn').onclick = function(){
for(var i = 0;i<items.length; i ++){
items[i].checked =false;
}
checkAll.checked = false;
}
//給反選框添加單擊事件函數
document.getElementById('checkReBtn').onclick = function(){
checkAll.checked = true;
for(var i = 0;i<items.length;i ++){
if(items[i].checked){
items[i].checked = false;
}else{
items[i].checked = true;
}
if(items[i].checked == false){
checkAll.checked = false;
}
}
}
//給送出按鈕添加單擊事件函數
document.getElementById('send').onclick = function(){
for(var i = 0;i<items.length;i ++){
if(items[i].checked){
alert(items[i].value)
}
}
}
//給全選/全不選框添加單擊事件函數
document.getElementById('checkAll').onclick = function(){
for(var i = 0;i<items.length;i ++){
items[i].checked = this.checked;
}
}
//給items設定單擊相應函數
for(var i = 0;i<items.length;i ++){
items[i].onclick = function(){
checkAll.checked = true;
for(var j = 0;j<items.length; j++){
if(items[j].checked == false){
checkAll.checked = false;
break;
}
}
}
}
}</script>
<style>div{
width: 350px;
margin: 50 auto;
background-color:lightblue;
text-align: center;
}</style>
</head>
<body>
<div>
<span>你擁有以下哪些角色？</span>
<input type="checkbox" id="checkAll" value="全選/全不選">全選/全不選<br>
<input type="checkbox" name="item" value="楓原萬葉">楓原萬葉
<input type="checkbox" name="item" value="可麗">可麗
<input type="checkbox" name="item" value="刻晴">刻晴
<input type="checkbox" name="item" value="魈">魈
<input type="checkbox" name="item" value="鐘離">鐘離<br>
<input type="button" id="checkAllBtn" value="全選">
<input type="button" id="checkAllNoBtn" value="全不選">
<input type="button" id="checkReBtn" value="反選"><br>
<input type="submit" id="send" value="送出">
</div>
</body>
</html> ![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)