JS实现Checkbox全选与反选-CSDN博客

本文链接：https://blog.csdn.net/qq_34737697/article/details/79214013

首先要有对循环的初始化，其次是设置循环的条件，然后是循环时要执行的命令，最后是自增。

for(var i=0;i<5;i++){

执行语句;

}

举例结合if判断和循环以及简单的js

需求：三个按钮实现checkbox的全选，取消全选和反选

<html>

<head>

<meta charset="utf-8">

<title>标题</title>

<style>

</style>

<script>

window.onload=function (){

    var a1=document.getElementById('btn1');

    var a4=document.getElementById('btn2');

    var a5=document.getElementById('btn3');

    var a2=document.getElementById('odiv');

    var a3=a2.getElementsByTagName('input');

    a1.onclick=function (){

        for(var i=0 ;i<a3.length;i++){

            a3[i].checked=true;

}

};

    a4.onclick=function (){

        for(var i=0 ;i<a3.length;i++){

            a3[i].checked=false;

}

};

       a5.onclick=function (){

           for(var i=0 ;i<a3.length;i++){

               if(a3[i].checked==true){

                   a3[i].checked=false;

               }else{

                   a3[i].checked=true;

}

}

};

};

</script>

</head>

<body>

<input id="btn1" type="button" value="全选">

<input id="btn2" type="button" value="取消全选">

<input id="btn3" type="button" value="反选">

<div id="odiv">

<input type="checkbox">

<input type="checkbox">

<input type="checkbox">

<input type="checkbox">

<input type="checkbox">

<input type="checkbox">

</div>

</body>

</html>

先用HTML标签完成结构，用div来嵌套checkbox，当在js中调用input时，用getElementsByTagName来选取随机量的input.checkbox，但是如果直接用他选，按钮也会选中，我们先选取id为odiv的块，然后用getElementsByTagName选取块中的input.checkbox，

getElementsByTagName选取的结果是数组，对选中所有元素进行设置相同属性，就要使用for循环，在规则中要用.length来获取数量。

JS-5.for循环