复选框的全选反选

最新推荐文章于 2022-04-19 10:55:12 发布

zhangshengsky

最新推荐文章于 2022-04-19 10:55:12 发布

阅读量213

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/zhangshengsky/article/details/72768230

版权

JS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

        <body>
        <input type="checkbox" id="ck01" οnclick="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" οnclick="sqAllYes();" value="全选">
        <input type="button" id="bu07" οnclick="sqAllNo();" value="全不选">
        <input type="button" id="bu08" οnclick="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>