欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端开发之js基础(2)

程序员文章站 2022-06-30 19:15:28
...

实现全选，反选功能

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>

上一篇： 基于Socket编程的网络聊天室

下一篇： 基于TCP协议的网络聊天室

推荐阅读