实现复选框的全选和反选

新手入坑博客第一天

 

废话不多说，先上代码

        <!--与下面代码进行对比-->
        全部<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包，不然没反应。