JS实现全选、反选、不选

效果图：
代码如下，复制即可使用：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
       window.onload = function(){//全局加载
           var oi = document.getElementById("oi");//全选按钮获取节点
           var po = document.getElementById("po");//单选按钮获取节点
           var yu = document.getElementById("yu");//反选按钮获取节点
           var inp = document.getElementsByTagName("input");
           oi.onclick = function(){//全选按钮加载点击事件

               for(var i = 0;i < inp.length;i++){//全选按钮循环  小于按钮和的全选中 按钮个数和为i
                   inp[i].checked = true;//按纽的属性值小于按钮个数是=（真）true
               }
           }
          po.onclick = function(){
               for(var i = 0;i < inp.length;i++){
                   inp[i].checked = false;
               }
           }
          yu.onclick = function(){

                  for(var i= 0;i < inp.length;i++){
                     if( inp[i].checked == true){
                         inp[i].checked = false;
                     }else {
                         inp[i].checked = true;
                     }
                  }
              }

       }
    </script>
</head>
<body>
    <input type="checkbox" value="足球" name="1" /><br/>
    <input type="checkbox" value="足球" name="2" /><br/>
    <input type="checkbox" value="足球" name="3" /><br/>
    <input type="checkbox" value="足球" name="4"/><br/>
    <input type="checkbox" value="足球" name="5" /><br/>
    <input type="checkbox" value="足球" name="6" /><br/>
    <input type="checkbox" value="足球" name="7" /><br/>
    <input type="checkbox" value="足球" name="8" /><br/>
    <input type="checkbox" value="足球" name="9" /><br/>
    <input type="checkbox" value="足球" name="0" /><br/>
    <input type="button" value="全选" id="oi"/>
    <input type="button" value="不全选" id="po"/>
    <input type="button" value="反选" id="yu"/>
</body>
</html>
如有错误，欢迎联系我改正，非常感谢！！！
JS实现全选、反选、不选

猜你喜欢
