js按钮全选和反选

最新推荐文章于 2022-10-19 22:43:24 发布

南與

最新推荐文章于 2022-10-19 22:43:24 发布

阅读量173

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_42354164/article/details/121176180

版权

代码实现：点击【全选】按钮，全部选中

<body>
    <form action="#">
        <input type="checkbox" name="list">项目1
        <input type="checkbox" name="list">项目2
        <input type="checkbox" name="list">项目3
        <input type="checkbox" name="list">项目4
        <label><input type="checkbox" id="all">全选
        </label>
    </form>

   <script>
    //    获取元素
       let all=document.getElementById("all");
        let checks=document.getElementsByName("list")
       all.addEventListener("click",function(){     //在按钮处设置监听
            let flag=all.checked;                   //把按钮的checked值赋给flag
           for(let i=0;i<checks.length;i++){        
               //循环多选框元素集，把多选框的checked改成flag，
               //当btn选中，其他也选中，状态跟随
               checks[i].checked=flag;
           }
       })
   </script>

</body>

多选框，再次点击，全部取消