zoukankan      html  css  js  c++  java
  • JS实现全选,不选,反选的示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    window.onload=function(){
        var oBtn1=document.getElementById('btn1');
        var oBtn2=document.getElementById('btn2');
        var oBtn3=document.getElementById('btn3');
        var oDiv=document.getElementById('div1');
        var aCh=oDiv.getElementsByTagName('input');
    
        oBtn1.onclick=function(){
            for(var i=0;i<aCh.length;i++){
            aCh[i].checked=true;
            }
        };
    
        oBtn2.onclick=function(){
            for(var i=0;i<aCh.length;i++){
            aCh[i].checked=false;
            }
        };
    
        oBtn3.onclick=function(){
            for(var i=0;i<aCh.length;i++){
                if(aCh[i].checked==true){//这里用==双等号
                aCh[i].checked=false;
                }
                else{
                    aCh[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="div1">
        <input type="checkbox" /><br/>
        <input type="checkbox" /><br/>
        <input type="checkbox" /><br/>
        <input type="checkbox" /><br/>
        <input type="checkbox" /><br/>
        <input type="checkbox" /><br/>
    </div>
    </body>
    </html>
  • 相关阅读:
    10 个你需要了解的 Linux 网络和监控命令
    U盘安装 bt5
    SpringCloud RabbitMQ 使用
    两个大数相乘笔试题目
    activemq 话题模式(三)
    activemq 队列模式(二)
    activemq 安装 (一)
    安装mysql5.7时缺少my.ini文件
    linux 远程rsa 登录配置 文件 /etc/ssh/sshd_config
    java -jar 解决占用终端问题
  • 原文地址:https://www.cnblogs.com/blacop/p/5911000.html
Copyright © 2011-2022 走看看