jQuery關於覆選框的基本小功能

這裡是我初步學習jquery後中巨做的一個關於覆選框的小功能：

　　　　點擊右邊選項如果勾上，對應的左邊三個小項全部選中，反之全不選，

左邊只要有一個沒選中，右邊大項就取消選中，反之左邊全部選中的話，左邊大項即為選中，下麵是樣式圖。

<div class="box">
        <table id="table1" class="mytable">
            <tr>
                <td>
                    <span>
                        <input type="checkbox" id="chkPromote" class="parentfunc" />圖書管理
                    </span>
                </td>
                <td>
                    <span>
                        <input type="checkbox" id="Checkbox1" />新增圖書管理
                    </span> <span>
                        <input type="checkbox" id="Checkbox2" />修改圖書管理
                    </span> <span>
                        <input type="checkbox" id="Checkbox3" />刪除圖書管理
                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    <span>
                        <input type="checkbox" id="Checkbox4" class="parentfunc" />會員管理
                    </span>
                </td>
                <td>
                    <span>
                        <input type="checkbox" id="Checkbox5" />新增會員管理
                    </span> <span>
                        <input type="checkbox" id="Checkbox6" />修改會員管理
                    </span> <span>
                        <input type="checkbox" id="Checkbox7" />刪除會員管理
                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    <span>
                        <input type="checkbox" id="Checkbox8" class="parentfunc" />系統設置
                    </span>
                </td>
                <td>
                    <span>
                        <input type="checkbox" id="Checkbox9" />管理員設置
                    </span> <span>
                        <input type="checkbox" id="Checkbox10" />角色管理
                    </span> <span>
                        <input type="checkbox" id="Checkbox11" />許可權管理
                    </span>
                </td>
            </tr>

        </table>

    </div>

jQuery代碼如下：

<script type="text/javascript">

　　//頁面載入
        $(function () {
            //點任意大項時
            $("tr td:first-child span input").click(function () {
　　　　　//利用點擊的的大項的位置找到它所在的同級td下的所有小項設置他們的checked（大項是選中那就全部選中，反之、、、就能簡單實現全選和全部選的功能）
                $(this).parents("td").siblings().find("input[type=checkbox]").prop("checked",$(this).prop("checked"));
            })

            //點任意小項時
            $("tr td:last-child span input").click(function () {
                var a = 0;

　　　　//迴圈點擊當前小項的同級的所有小項，所有的小項的選中情況
                for (var i = 0; i < $(this).parents("td").children.length + 1 ; i++) {
　　　　　　//判斷如果哪怕找到一個小項為沒有選中，那麼將對應的大項設為不選中。
                    if ($(this).parents("td").children(":eq(" + i + ")").children().prop("checked") == false) {
　　　　　　　　//設大項為不選中
                        $(this).parents("td").siblings().find("input[class=parentfunc]").prop("checked", false);

　　　　　　//只要有一個小項為false那麼就a+1
                        a++;
                    }
                }

　　　　//判斷這個a變數，如果等等於0就說明所有小項都選中了，那麼就把對應的大項選中
                if (a == 0) {
　　　　　　//選中大項
                    $(this).parents("td").siblings().find("input[class=parentfunc]").prop("checked", true);
                }
            })
        })
    </script>