javaScript实现复选框的全选反选事件_javascript实现复选框的全选和反选-CSDN博客

本文链接：https://blog.csdn.net/xmz1996/article/details/78110660

这里写图片描述

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>

   <script>

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

            function myClick(){                 
                alert("hello");
            }


            //全选事件
            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>

    <span onclick="myClick()" id="xz"><input type="checkbox" id="selAll"/>全选</span>
    <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>