摘要：<!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获取数组的长度，通过for循环就可以遍历整个name名一样input框 ；
3、name[i]通过for循环就得出所有iput框；checked是加载时被预先选定的选项，name[i].checked是true的时候就是选中，是
false全部为空。
4、单独反选时，先判定name数组下标选中条件是true，执行语句时是false空，反之就是true.
5、全选和反选时： 先判断id是否被选中，如果选中就执行name数组选中，否则执行为空false.
批改老师：灭绝师太批改时间：2019-01-30 09:27:23
老师总结：代码习惯很好,逻辑理解很清晰,好的习惯要继续保持
