前端开发之js基础(2)-CSDN博客

本文链接：https://blog.csdn.net/DHRMM999/article/details/82290175

实现全选，反选功能

js实现全选功能

html代码

<body>
        <div id="all">
                <p>请选择您的爱好</p>
                <input type="submit" id="allyes" value="全都选" onclick="ally()"/>
                <input type="submit" id="reverse" value="反向选" onclick="rever()"/>
                <input type="submit" id="allno" value="全不选" onclick="alln()"/><br/>
                <input type="checkbox" class="check"/>篮球
                <input type="checkbox" class="check"/>足球
                <input type="checkbox" class="check"/>排球
                <input type="checkbox" class="check"/>羽毛球
                <input type="checkbox" class="check"/>乒乓球
        </div>
    </body>

js代码

<script type="text/javascript">
            var checkall = document.getElementsByClassName("check");
            function ally(){
                for(var i=0;i<checkall.length;i++){
                    checkall[i].checked = "checked";
                }
            }
            function alln(){
                for(var i=0;i<checkall.length;i++){
                    checkall[i].checked = "";
                }
            }
            function rever(){
                for(var i=0;i<checkall.length;i++){
                    if(checkall[i].checked == ""){
                        checkall[i].checked = "checked";
                    }else{
                        checkall[i].checked = "";
                    }
                }
            }
        </script>