web——全选和反选案例

最新推荐文章于 2024-03-24 00:16:48 发布

原创最新推荐文章于 2024-03-24 00:16:48 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#web #javascript

web 专栏收录该内容

16 篇文章

订阅专栏

这篇博客分享了一个常见的Web开发功能——全选和反选的实现案例，适用于网页表格或列表操作。通过简单的JavaScript代码，实现了点击按钮即可完成全选或反选所有选项的功能，已实际测试并确认可用。

这里和大家分享一个在网长经常见到的全选啊，反选啊！亲，粘贴复制就可以使用了哦（测试过啦）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>

            window.onload=function(){
                selAll=document.getElementById("selAll");
                hobbys =document.getElementsByName("hobby");
                fx = document.getElementById("fx");

                //全选事件
                selAll.onclick=function(){
                    //全选
                    if(selAll.checked==true){
                        for(var i=0;i<hobbys.length;i++){
                            hobbys[i].checked=true;
                        }
                    }else{
                        for(var i=0;i<hobbys.length;i++){
                            hobbys[i].checked=false;
                    }
                }
            }
                //反选
                    fx.onclick=function(){
                        for(var i=0;i<hobbys.length;i++){
                            var b=hobbys[i];
                            if(b.checked==true){
                                b.checked=false;
                            }else{
                                b.checked=true;
                            }
                        }
                    }
        }
        </script>
    </head>
    <body>
        <input type="checkbox" id="selAll" />全选
        <button id="fx">反选</button>
        <br />
        <input type="checkbox" name="hobby" />篮球
        <input type="checkbox" name="hobby" />足球
        <input type="checkbox" name="hobby" />排球
        <input type="checkbox" name="hobby" />铅球
        <input type="checkbox" name="hobby" />棒球
    </body>
</html>