复选框的全选和反选

最新推荐文章于 2022-04-19 10:55:12 发布

唥颜

最新推荐文章于 2022-04-19 10:55:12 发布

阅读量287

点赞数

CC 4.0 BY-SA版权

分类专栏： DOM

本文链接：https://blog.youkuaiyun.com/qq_40351096/article/details/78110742

DOM 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个简单的HTML页面示例，通过JavaScript实现了复选框的全选和反选功能。当点击全选按钮时，所有兴趣选项复选框都会被选中；点击反选按钮时，则会检查当前是否有选中的兴趣选项并进行反转。

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

复选框的全选和反选示例效果

示例图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
            window.onload=function(){
            var sel= document.getElementById("sel");
            var hobbys= document.getElementsByName("hobby");
            var fx=document.getElementById("fx");
                //全选
                sel.onclick=function(){

                    if(sel.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++){
                        if(hobbys[i].checked==true){
                            fx.checked=false;
                        }else{
                            fx.checked=true;
                        }

                    }
                }


            }
        </script>
    </head>
    <body>
        <p>

        <input type="checkbox" id="sel" />全选
        <input type="checkbox" id="fx"/>反选
        </p>

        <p>
            <input type="checkbox" name="hobby" />音乐
            <input type="checkbox" name="hobby" />书法
            <input type="checkbox" name="hobby" />绘画
        </p>

    </body>
</html>