實現復選框的全選和反選

新手入坑博客第一天

 

廢話不多說，先上代碼

        <!--與下面代碼進行對比-->
        全部<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包，不然沒反應。