zoukankan      html  css  js  c++  java
  • JS实现全选、反选、不选

     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>

     如有错误,欢迎联系我改正,非常感谢!!!

  • 相关阅读:
    [BZOJ2071] [POI2004]JAS
    [BZOJ1852] [MexicoOI06]最长不下降序列(dp+贪心转移)
    用Java实现基于SOAP的XML文档网络传输及远程过程调用(RPC)(转)
    Amazon云计算的一些实用应用(转)
    使用netbeans6.7.1开发webservice 服务端 和 客户端(转)
    深入探索SOAP1.1使用SAAJ1.2.1(转)
    推荐:PoolParty!一个管理EC2集群的Ruby Gem开源工具(转)
    max 加载 菜单项
    2011 新相
    重要的视图类型解释。
  • 原文地址:https://www.cnblogs.com/yidaixiaohui/p/8447111.html
Copyright © 2011-2022 走看看