JS实现全选、反选、不选

最新推荐文章于 2022-12-13 22:34:38 发布

Foryourfuture

最新推荐文章于 2022-12-13 22:34:38 发布

阅读量99

点赞数

本文链接：https://blog.csdn.net/qq_36190858/article/details/86152242

版权

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>