javascript-求詳解下面這段代碼【jQuery的】

求詳解下面這段代碼【jQuery的】

 <script src="jquery-1.8.3.js"></script>
<script>
$(function(){
    $("ul.categories input").click(function(){
        var children = $(this).next();
        var isChecked = $(this).prop("checked");

        if(children){
            if(isChecked){
                children.find("input").prop("checked","checked");
            }else{
                children.find("input").removeProp("checked");
            }
        }

        var checkedCount = $(this).parent().parent().find(">li >input:checked").length;
        var count = $(this).parent().parent().find(">li >input").length;

        if(checkedCount == count){
            $(this).parent().parent().parent().find(">input").prop("checked","checked");
        }else{
            $(this).parent().parent().parent().find(">input").removeProp("checked");
        }

    });
});
</script>
<ul class="categories">
    <li><input type="checkbox" />數碼電子
        <ul>
            <li><input type="checkbox" />手機</li>
            <li><input type="checkbox" />電腦</li>
            <li><input type="checkbox" />U盤</li>
            <li><input type="checkbox" />相機</li>
        </ul>
    </li>
    <li><input type="checkbox" />服裝
        <ul>
            <li><input type="checkbox" />毛衣</li>
            <li><input type="checkbox" />T恤</li>
            <li><input type="checkbox" />羽絨服</li>
            <li><input type="checkbox" />秋褲</li>
        </ul>
    </li>
    <li><input type="checkbox" />飾品
        <ul>
            <li><input type="checkbox" />純金</li>
            <li><input type="checkbox" />純銀</li>
        </ul>
    </li>
    <li><input type="checkbox" />家電
        <ul>
            <li><input type="checkbox" />電飯煲</li>
            <li><input type="checkbox" />電磁爐</li>
            <li><input type="checkbox" />吸塵器</li>
            <li><input type="checkbox" />液化氣灶</li>
        </ul>
    </li>
</ul>

最佳回答：

     $(function () {
        $("ul.categories input").click(function () {
            var children = $(this).next();//this只想你當前點擊的input，調用next獲取ul對象
            var isChecked = $(this).prop("checked");//checkbox是否勾選

            if (children) {//有ul，這獲取ul下的checkbox進行勾選或者取消勾選
                if (isChecked) {
                    children.find("input").prop("checked", "checked");
                } else {
                    children.find("input").removeProp("checked");
                }
            }

            var checkedCount = $(this).parent().parent().find(">li >input:checked").length;//獲取input的父元素ul下的li元素下的直接checkbox被勾選的個數

            var count = $(this).parent().parent().find(">li >input").length;//這獲取input的父元素ul下的li元素下的直接checkbox個數
            //下面就是判斷2個長度一樣就勾選父元素的input用的，就是勾選完子checkbox後其父checkbox也自動勾上，否則取消
            if (checkedCount == count) {
                $(this).parent().parent().parent().find(">input").prop("checked", "checked");
            } else {
                $(this).parent().parent().parent().find(">input").removeProp("checked");
            }

        });
    });