复选框/“全选”/“全不选”/“反选”

最新推荐文章于 2020-09-29 17:04:06 发布

莎莉蛙

最新推荐文章于 2020-09-29 17:04:06 发布

阅读量241

点赞数

文章标签： javascript基础

本文链接：https://blog.csdn.net/qq_41880978/article/details/82502179

版权

<body>
    <button id="alltrue">全选</button>
    <button id="allfalse">全不选</button>
    <button id="reverse">反选</button></br></br></br></br>

    <input type="checkbox" ></br>
    <input type="checkbox"></br>
    <input type="checkbox"></br>
    <input type="checkbox"></br>
    <input type="checkbox"></br>
    <input type="checkbox"></br>
    <input type="checkbox"></br>

    <script>
        var btn1 = document.getElementsByTagName('button')[0];
        var btn2 = document.getElementsByTagName('button')[1];
        var btn3 = document.getElementsByTagName('button')[2];
        var inputs = document.getElementsByTagName('input');

        btn1.onclick = function(){
            for(var i = 0;i <inputs.length ; i++){
                inputs[i].checked = true;
            }

        }
        btn2.onclick = function(){
            for(var i = 0;i <inputs.length ; i++){
                inputs[i].checked = false;
            }

        }
        btn3.onclick = function(){

            for(var i = 0;i <inputs.length ; i++){
               if( inputs[i].checked == true){
                inputs[i].checked = false;
               }else{
                inputs[i].checked = true;
               }
            }

        }
    </script>

莎莉蛙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复选框/“全选”/“全不选”/“反选”

&lt;body&gt; &lt;button id="alltrue"&gt;全选&lt;/button&gt; &lt;button id="allfalse"&gt;全不选&lt;/button&gt; &lt;button id="reverse"&gt;反选&lt;/button&gt;&
复制链接

扫一扫