web——全选和反选案例

Cl_Daisy

于 2017-09-26 15:03:23 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： web javascript

本文链接：https://blog.youkuaiyun.com/Cl_Daisy/article/details/78095449

web 专栏收录该内容

16 篇文章

订阅专栏

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

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

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

<!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>