案例：全選練習
*創建一個頁面*複選框和按鈕
-四個複選框表示愛好
-還有一個複選框操作 全選和全不選，也有一個事件
**三個按鈕，分別有事件
-全選
-全不選
-反選
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<input type="checkbox" id="boxid" οnclick="selAllNo();"/>全選/全不選
<br/>
<input type="checkbox" name="love"/>籃球
<input type="checkbox" name="love"/>排球
<input type="checkbox" name="love"/>羽毛球
<input type="checkbox" name="love"/>乒乓球
<br/>
<input type="button" value="全選" οnclick="selAll();"/>
<input type="button" value="全不選" οnclick="selNo();"/>
<input type="button" value="反選" οnclick="selOther();"/>
</body>
<script type="text/javascript">
//實現全選的操作
function selAll(){
/*
1.獲取要操作的複選框
-使用getElementByName()
2.返回是數組
-屬性checked判斷複選框是否選中
** checked = true //表示選中
**checked = false //表示不選中
-遍歷數組，得到的是每一個checkbox
**把每一個checkbox屬性checked=true
*/
var loves = document.getElementsByName("love");
for(var i=0 ; i<loves.length ; i++){
var love1 = love[i];
love1.checked = true;
}
}
//實現全不選
function selNo(){
/*
1.獲取要操作的複選框
-使用getElementByName()
2.返回是數組
-遍歷數組，得到的是每一個checkbox
**把每一個checkbox屬性checked=false
*/
var loves = document.getElementsByName("love");
for(var i=0 ; i<loves.length ; i++){
var love1 = love[i];
love1.checked = false;
}
}
//實現反選
function selOther(){
/*
1.獲取要操作的複選框
-使用getElementByName()
2.返回是數組
-遍歷數組，得到的是每一個checkbox
判斷當前複選框是否選中
if(love1.checked==true){
love1.checked==false;
}else{
love1.checked==true
}
*/
var loves = document.getElementsByName("love");
for(var i=0 ; i<loves.length ; i++){
var love1 = love[i];
if(love1.checked==true){
love1.checked=false;
}else{
love1.checked=true
}
}
}
//實現全選/全不選
function selAllNo(){
/*
1.得到上面那個複選框
2.判斷這個複選框是否選中
3.如果是選中，下面是全選
4.如果不選中，下面全不選
*/
var box1 = document.getElementById("boxid");
if(box1.checked == true){
selAll();
}else{
selNo();
}
}
</script>
</html>