复选框的全选反选

zhangshengsky

于 2017-05-26 14:25:15 发布

阅读量254

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/zhangshengsky/article/details/72768230

JS 专栏收录该内容

16 篇文章

订阅专栏

        <body>
        <input type="checkbox" id="ck01" onclick="sqAll();"> 全选/全不选</br>

            <input type="checkbox" id="ck02"  name="love"> 篮球</br>
            <input type="checkbox" id="ck03"  name="love"> 羽毛球</br>
            <input type="checkbox" id="ck04"  name="love"> 乒乓球</br>
            <input type="checkbox" id="ck05"  name="love"> 游泳</br>

        <input type="button" id="bu06" onclick="sqAllYes();" value="全选">
        <input type="button" id="bu07" onclick="sqAllNo();" value="全不选">
        <input type="button" id="bu08" onclick="selOther();" value="反选">


        <script type="text/javascript">
            var loves = document.getElementsByName("love");
            function sqAllYes() {
                for(var i=0;i<loves.length;i++){
                    loves[i].checked=true;
                }
            }
            function sqAllNo() {
                for(var i=0;i<loves.length;i++){
                    loves[i].checked=false;
                }
            }
            function selOther() {
                for(var i=0;i<loves.length;i++){
                    if(loves[i].checked==false){
                        loves[i].checked=true;
                    }else if (loves[i].checked==true){
                        loves[i].checked=false;
                    }
                }
            }
        </script>
        </body>