js中复选框的多选与反选

最新推荐文章于 2024-04-14 11:46:37 发布

爱体育的IT男

最新推荐文章于 2024-04-14 11:46:37 发布

阅读量241

点赞数

分类专栏： javascript html 以及 web基础文章标签： javascript

本文链接：https://blog.csdn.net/qq_37169103/article/details/78093178

版权

javascript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html 以及 web基础

3 篇文章 0 订阅

订阅专栏

<!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" name="" 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" />羽毛球
    </body>
</html>

爱体育的IT男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中复选框的多选与反选

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ selAll = document.getElementById("selAll
复制链接

扫一扫