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

实现复选框的全选和反选

程序员文章站 2023-11-15 15:49:28
新手入坑博客第一天 废话不多说,先上代码 ps:要记得看有没有导入jquery.js包,不然没反应。 ......

新手入坑博客第一天

 

废话不多说,先上代码

        <!--与下面代码进行对比-->
        全部<input type="checkbox" value=""/>
        篮球<input type="checkbox" value=""/>
        代码<input type="checkbox" value=""/>
        女朋友<input type="checkbox" value=""/>
        游戏<input type="checkbox" value=""/>
        
        <!--水平线-->
        <hr style="width: 400px;margin: 10px 0 10px 0;">
            
        <!--有全选/反选功能-->
        <div id="test">
            全部<input type="checkbox" onclick="clickdome(this);"/>
            篮球<input type="checkbox" value=""/>
            代码<input type="checkbox" value=""/>
            女朋友<input type="checkbox" value=""/>
            游戏<input type="checkbox" value=""/>
        </div>
        
        <script>
            /*注意要记得导入jquery.js包*/
            function clickdome(obj){
                if($(obj).prop("checked")){
                    $("#test").find("input[type='checkbox']").prop("checked",true);
                }else{
                    $("#test").find("input[type='checkbox']").prop("checked",false);
                }
            }
        </script>

ps:要记得看有没有导入jquery.js包,不然没反应。