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>
  • 相关阅读:
    学习进度四
    每日进度二
    每日进度一
    学习进度三
    学习进度二
    安全性战术
    Linux 常用命令
    python测试框架之pytest
    Python 列表生成式和字典生成式
    使用Python在Windows 10上显示通知信息
  • 原文地址:https://www.cnblogs.com/blacop/p/5911000.html
Copyright © 2011-2022 走看看