使用getElementsByName实现多选，反选，全选

鸭不是鸭

于 2021-07-03 15:30:06 发布

阅读量184

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/defined_/article/details/118440570

版权

代码如下：

<html>

    <head>

        <script type="text/javascript">

            function checkAll(){

                var hobbies=document.getElementsByName("hobby");

                for(var i=0;i<3;i++){

                    hobbies[i].checked=true;

                }

            }

            function checkNo(){

                var hobbies=document.getElementsByName("hobby");

                for(var i=0;i<3;i++){

                    hobbies[i].checked=false;

             }

            }

            function checkRe(){

                var hobbies=document.getElementsByName("hobby");

                for(var i=0;i<3;i++){

                    if(hobbies[i].checked){

                        hobbies[i].checked=false;

                    }else{

                        hobbies[i].checked=true;

                    }

             }

            }

        </script>

    </head>

    <body>

        <input type="checkbox" name="hobby" value="java"/>java

        <input type="checkbox" name="hobby" value="c"/>c

        <input type="checkbox" name="hobby" value="js"/>js

        <button οnclick="checkAll()">全选</button>

        <button οnclick="checkNo()">全不选</button>

        <button οnclick="checkRe()">反选</button>

    </body>

</html>