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

Original 2019-05-03 14:23:51 372
abstract:有如下案例,使用JavaScript实现全选(全不选)按钮。这个按钮在实际开发中也是很常用的,源码附上   <!DOCTYPE html>     <html>     <head>      

有如下案例,使用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>

Correcting teacher:查无此人Correction time:2019-05-05 10:33:23
Teacher's summary:完成的不错。这个最简单的全选,之后的商城购物车功能,还会增加计算购物车里商品的总价。继续加油

Release Notes

Popular Entries