????：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> &nbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
height: 300px;
width: 300px;
border: 1px solid rgb(0, 0, 0);
margin: 20px 20px;
border-radius: 10px;
}
#box1{
border-bottom: 1px solid rgb(0, 0, 0);
padding-top:10px ;
}
.box input{
margin: 8px 20px;
}
#box2{
margin: 5px 3px; border-top:1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<div id="box1">
<input type="checkbox" id="quanx" onclick="qfx()">全選/反選
</div>
<input type="checkbox" name="flei">玫瑰<br>
<input type="checkbox" name="flei">百合<br>
<input type="checkbox" name="flei">蘭花<br>
<input type="checkbox" name="flei">牡丹<br>
<input type="checkbox" name="flei">向日葵<br>
<input type="checkbox" name="flei">康乃馨<br>
<div id="box2">
<input type="button" value="全選" onclick="qxx()"/>
<input type="button" value="全不選" onclick="qbx()" />
<input type="button" value="反選" onclick="fxuan()"/>
</div>
</div>
<script>
//全選
var fenlei=document.getElementsByName("flei");
var quanxuan=document.getElementById("quanx")
function qxx(){
for(i=0;i<fenlei.length;i++){
fenlei[i].checked=true;
}
}
//全不選
function qbx(){
for(i=0;i<fenlei.length;i++){
fenlei[i].checked=false;
}
}
// 反選
function fxuan(){
for(i=0;i<fenlei.length;i++){
if(fenlei[i].checked==true){
fenlei[i].checked=false;
}else{
fenlei[i].checked=true;
}
}
}
//全選 反選
function qfx(){
for(i=0;i<fenlei.length;i++){
if(quanxuan.checked){
fenlei[i].checked=true;
}else{
fenlei[i].checked=false;
}
}
}
</script>
</body>
</html>
1、document.getElementsByName獲取name元素，document.getElementById獲取ID元素；
2、使用name.length獲取數(shù)組的長(zhǎng)度，通過(guò)for循環(huán)就可以遍歷整個(gè)name名一樣input框 ；
3、name[i]通過(guò)for循環(huán)就得出所有iput框；checked是加載時(shí)被預(yù)先選定的選項(xiàng)，name[i].checked是true的時(shí)候就是選中，是
false全部為空。
4、單獨(dú)反選時(shí)，先判定name數(shù)組下標(biāo)選中條件是true，執(zhí)行語(yǔ)句時(shí)是false空，反之就是true.
5、全選和反選時(shí)： 先判斷id是否被選中，如果選中就執(zhí)行name數(shù)組選中，否則執(zhí)行為空f(shuō)alse.
?? ???：滅絕師太?? ??：2019-01-30 09:27:23
???? ??：代碼習(xí)慣很好,邏輯理解很清晰,好的習(xí)慣要繼續(xù)保持