JS实现全选全不选功能

原创已于 2023-12-07 14:56:52 修改 · 775 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2023-04-15 15:13:09 首次发布

web 专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何使用JavaScript来操作HTML中的checkbox元素，实现全选、全不选和反选的功能。通过点击按钮，利用JavaScript的事件处理函数改变checkbox的checked属性，达到控制选中状态的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先明确选中有哪几种方式：（1）用户点击、（2）标签定义属性 checkd 、(3) js中checkd = true 为选中

HTML代码：

 <form>
        <p><input type="checkbox">50</p>
        <p><input type="checkbox">100</p>
        <p><input type="checkbox">150</p>
        <p><input type="checkbox">200</p>
    </form>
    <button onclick="getAll(0)">全选</button>
    <button onclick="getAll(1)">全不选</button>
    <button onclick="getAll(2)">返选</button>

JS代码：

<script>
        let btn = document.getElementsByTagName('button');
        let ipt = document.getElementsByTagName('input');
       
        //方法二：封装函数
        function getAll(num){
            for(let i = 0; i < ipt.length;i++){
                if(num == 0){
                    ipt[i].checked = true;
                }
                else if(num == 1){
                    ipt[i].checked = false;
                }
                else{
                    ipt[i].checked = !ipt[i].checked;
                }
            }
        }
    </script>