返回使用JavaS......登陆

使用JavaScript实现全选(全不选)按钮

阿超2019-05-03 14:23:51371

有如下案例,使用JavaScript实现全选(全不选)按钮。
这个按钮在实际开发中也是很常用的,源码附上 

  <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>多选框练习</title>
    </head>
    <body>
     
    <input type="checkbox" id="n2" onclick="set();"/>全选/全不选<br/><hr/>
     
    <input type="checkbox" name="nn" />羽毛球<br/>
    <input type="checkbox" name="nn" />蓝球<br/>
    <input type="checkbox" name="nn" />橄榄球<br/>
    <input type="checkbox" name="nn" />乒乓球<br/>
    <input type="checkbox" name="nn" />足球<br/>
    <input type="checkbox" name="nn" />棒球<br/><hr/>
     
     
    <input type="button" value="全选" onclick="setAll();" />
    <input type="button" value="全不选" onclick="setNone();" />
    <input type="button" value="反选" onclick="setBack();" />
    <script type="text/javascript">
     
     
        function setAll() {
            var a=document.getElementsByName("nn");//先获取input多选框
            //获取的a是个数组,遍历这个数组,设置checked属性
            for(var i=0;i<a.length;i++){
                a[i].checked=true;//checked为true时是选中,false时是未选中
            }
        }
        function setNone() {
            var a=document.getElementsByName("nn");
            for(var i=0;i<a.length;i++){
                a[i].checked=false;
            }
        }
        function setBack() {
            var c=document.getElementsByName("nn");
            for(var i=0;i<c.length;i++){
                if(c[i].checked==true){
                    c[i].checked=false;
                }
                else{
                    c[i].checked=true;
                }
            }
        }
        function set() {
            var d=document.getElementById("n2");
            if(d.checked==true){
                setAll();//直接调用已有的方法,设置checked属性
            }
            else{
                setNone();
            }
        }
     
    </script>
     
    </body>
    </html>

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送