jquery - 使用jquery在树视图中选中子复选框时选择所有子子

Question

当单击父级时，我正在使用此 jquery 来选择所有子级并且它工作正常。

$(document).ready(function () {
    $("div[id $= Tree_Index]").find("input[type=checkbox]:first").click(function () { 
        $(this).closest("div").find(':checkbox').attr('checked', this.checked);
    });
});

现在，如果我有一个孩子的子孩子，我想在选择孩子时选择所有的子孩子。我怎样才能在 jquery 中实现这一点。

<div style="font-size: 11px; font-family: Tahoma; font-weight: bold; text-align: left;" class="tree" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index">
        <table cellspacing="0" cellpadding="0" style="border-width:0;">
            <tbody><tr>
                <td><a href="javascript:__doPostBack('ctl00$cphMain$ctlEsnSearchByServices$Treecontrol_Left_0$Tree_Index','t1730b784-94ca-42d3-80aa-1c9c064e271c')"><img style="border-width:0;" alt="Collapse Clinics" src="/WebResource.axd?d=_533LbcrYzxclETTqT9E9lbjpoP9iiSVLn9WP908dD96sH9D2JXH4BN8Q2OdATM4TYJU67kfDSnJQpffp_ITMVu3Y839pir-IzEhB41mqu6U8EWb0&amp;t=634604712479085897"></a></td><td class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_1"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn0CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn0CheckBox"><span id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext0" class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_0">Clinics</span></td>
            </tr>
        </tbody></table><table cellspacing="0" cellpadding="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><a href="javascript:__doPostBack('ctl00$cphMain$ctlEsnSearchByServices$Treecontrol_Left_0$Tree_Index','t1730b784-94ca-42d3-80aa-1c9c064e271c\\3f2cfef3-2466-48f7-84aa-82cd23bc3249')"><img style="border-width:0;" alt="Collapse GP Clinics" src="/WebResource.axd?d=PtoZaOE4OJ68kA17eB1Ru-nLDbZ-ilvB8z5abVJ8BfKZp0iKKZ8iPpsV8tJ5bLWmNAAyfP3gCpxQRyrUtuHqeJKGILYd8Nbb3deoYK17HD9ZYyeS0&amp;t=634604712479085897"></a></td><td class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_1"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn1CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn1CheckBox"><span id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext1" class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_0">GP Clinics</span></td>
            </tr>
        </tbody></table><table cellspacing="0" cellpadding="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"><img alt="" src="/WebResource.axd?d=J9BSVEmYJ2R79DzKPp_KwudhxkmRYjt31taLGpqjHFuG3gyciimdNIz2hfef3rMTcgKKF9rZcFetwoS-fvXnw3uYWh88CZ98-dNXPYEoMwTaffwZ0&amp;t=634604712479085897"></div></td><td><img alt="" src="/WebResource.axd?d=Ptpr_s5NKQd2NhXQH_MiSClxDVR5ZHar9QZwFenhB3L_8-vIXRA_NHlxqP3iWPQWzSbDizVZ5YO8o3q4fX1XUhismQEMBdpf8AuHvaSyrvYco4WB0&amp;t=634604712479085897"></td><td class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_1"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn2CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn2CheckBox"><span id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext2" class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_0">CDMP Participating Clinics</span></td>
            </tr>
        </tbody></table><table cellspacing="0" cellpadding="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"><img alt="" src="/WebResource.axd?d=J9BSVEmYJ2R79DzKPp_KwudhxkmRYjt31taLGpqjHFuG3gyciimdNIz2hfef3rMTcgKKF9rZcFetwoS-fvXnw3uYWh88CZ98-dNXPYEoMwTaffwZ0&amp;t=634604712479085897"></div></td><td><img alt="" src="/WebResource.axd?d=Ptpr_s5NKQd2NhXQH_MiSClxDVR5ZHar9QZwFenhB3L_8-vIXRA_NHlxqP3iWPQWzSbDizVZ5YO8o3q4fX1XUhismQEMBdpf8AuHvaSyrvYco4WB0&amp;t=634604712479085897"></td><td class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_1"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn3CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn3CheckBox"><span id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext3" class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_0">CHAS Participating Clinics - Dental</span></td>
            </tr>
        </tbody></table><table cellspacing="0" cellpadding="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"><img alt="" src="/WebResource.axd?d=J9BSVEmYJ2R79DzKPp_KwudhxkmRYjt31taLGpqjHFuG3gyciimdNIz2hfef3rMTcgKKF9rZcFetwoS-fvXnw3uYWh88CZ98-dNXPYEoMwTaffwZ0&amp;t=634604712479085897"></div></td><td><img alt="" src="/WebResource.axd?d=Ptpr_s5NKQd2NhXQH_MiSClxDVR5ZHar9QZwFenhB3L_8-vIXRA_NHlxqP3iWPQWzSbDizVZ5YO8o3q4fX1XUhismQEMBdpf8AuHvaSyrvYco4WB0&amp;t=634604712479085897"></td><td class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_1"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn4CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn4CheckBox"><span id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext4" class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_0">CHAS Participating Clinics &ndash; Medical</span></td>
            </tr>
        </tbody></table><table cellspacing="0" cellpadding="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"><img alt="" src="/WebResource.axd?d=J9BSVEmYJ2R79DzKPp_KwudhxkmRYjt31taLGpqjHFuG3gyciimdNIz2hfef3rMTcgKKF9rZcFetwoS-fvXnw3uYWh88CZ98-dNXPYEoMwTaffwZ0&amp;t=634604712479085897"></div></td><td><img alt="" src="/WebResource.axd?d=Ptpr_s5NKQd2NhXQH_MiSClxDVR5ZHar9QZwFenhB3L_8-vIXRA_NHlxqP3iWPQWzSbDizVZ5YO8o3q4fX1XUhismQEMBdpf8AuHvaSyrvYco4WB0&amp;t=634604712479085897"></td><td class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_1"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn5CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn5CheckBox"><span id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext5" class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_0">IDAPE/ElderShield Disability Assessors</span></td>
            </tr>
        </tbody></table><table cellspacing="0" cellpadding="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"><img alt="" src="/WebResource.axd?d=J9BSVEmYJ2R79DzKPp_KwudhxkmRYjt31taLGpqjHFuG3gyciimdNIz2hfef3rMTcgKKF9rZcFetwoS-fvXnw3uYWh88CZ98-dNXPYEoMwTaffwZ0&amp;t=634604712479085897"></div></td><td><img alt="" src="/WebResource.axd?d=BOvsSO2B3BKMupOSRxbma89ER-i_r1FrqfnVsgVq_QiVog3IJUebdD29i4BVAo26-lbJh_BLXmsQGU_VArXhNt6ejiWJk87whzKer6ts-_kM9Vt90&amp;t=634604712479085897"></td><td class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_1"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn6CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn6CheckBox"><span id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext6" class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_0">Other GP Clinics</span></td>
            </tr>
        </tbody></table><table cellspacing="0" cellpadding="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><a href="javascript:__doPostBack('ctl00$cphMain$ctlEsnSearchByServices$Treecontrol_Left_0$Tree_Index','t1730b784-94ca-42d3-80aa-1c9c064e271c\\2fb1d7f3-1a31-4846-ab0c-76adbccf008c')"><img style="border-width:0;" alt="Collapse Other Clinics" src="/WebResource.axd?d=PtoZaOE4OJ68kA17eB1Ru-nLDbZ-ilvB8z5abVJ8BfKZp0iKKZ8iPpsV8tJ5bLWmNAAyfP3gCpxQRyrUtuHqeJKGILYd8Nbb3deoYK17HD9ZYyeS0&amp;t=634604712479085897"></a></td><td class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_1"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn7CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn7CheckBox"><span id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext7" class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_0">Other Clinics</span></td>
            </tr>
        </tbody></table><table cellspacing="0" cellpadding="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"><img alt="" src="/WebResource.axd?d=J9BSVEmYJ2R79DzKPp_KwudhxkmRYjt31taLGpqjHFuG3gyciimdNIz2hfef3rMTcgKKF9rZcFetwoS-fvXnw3uYWh88CZ98-dNXPYEoMwTaffwZ0&amp;t=634604712479085897"></div></td><td><img alt="" src="/WebResource.axd?d=Ptpr_s5NKQd2NhXQH_MiSClxDVR5ZHar9QZwFenhB3L_8-vIXRA_NHlxqP3iWPQWzSbDizVZ5YO8o3q4fX1XUhismQEMBdpf8AuHvaSyrvYco4WB0&amp;t=634604712479085897"></td><td class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_1"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn8CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn8CheckBox"><span id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext8" class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_0">Community Geriatric Clinics</span></td>
            </tr>
        </tbody></table><table cellspacing="0" cellpadding="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"><img alt="" src="/WebResource.axd?d=J9BSVEmYJ2R79DzKPp_KwudhxkmRYjt31taLGpqjHFuG3gyciimdNIz2hfef3rMTcgKKF9rZcFetwoS-fvXnw3uYWh88CZ98-dNXPYEoMwTaffwZ0&amp;t=634604712479085897"></div></td><td><img alt="" src="/WebResource.axd?d=Ptpr_s5NKQd2NhXQH_MiSClxDVR5ZHar9QZwFenhB3L_8-vIXRA_NHlxqP3iWPQWzSbDizVZ5YO8o3q4fX1XUhismQEMBdpf8AuHvaSyrvYco4WB0&amp;t=634604712479085897"></td><td class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_1"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn9CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn9CheckBox"><span id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext9" class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_0">Community VWO Clinics</span></td>
            </tr>
        </tbody></table><table cellspacing="0" cellpadding="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"><img alt="" src="/WebResource.axd?d=J9BSVEmYJ2R79DzKPp_KwudhxkmRYjt31taLGpqjHFuG3gyciimdNIz2hfef3rMTcgKKF9rZcFetwoS-fvXnw3uYWh88CZ98-dNXPYEoMwTaffwZ0&amp;t=634604712479085897"></div></td><td><img alt="" src="/WebResource.axd?d=Ptpr_s5NKQd2NhXQH_MiSClxDVR5ZHar9QZwFenhB3L_8-vIXRA_NHlxqP3iWPQWzSbDizVZ5YO8o3q4fX1XUhismQEMBdpf8AuHvaSyrvYco4WB0&amp;t=634604712479085897"></td><td class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_1"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn10CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn10CheckBox"><span id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext10" class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_0">Counselling Service</span></td>
            </tr>
        </tbody></table><table cellspacing="0" cellpadding="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"><img alt="" src="/WebResource.axd?d=J9BSVEmYJ2R79DzKPp_KwudhxkmRYjt31taLGpqjHFuG3gyciimdNIz2hfef3rMTcgKKF9rZcFetwoS-fvXnw3uYWh88CZ98-dNXPYEoMwTaffwZ0&amp;t=634604712479085897"></div></td><td><img alt="" src="/WebResource.axd?d=Ptpr_s5NKQd2NhXQH_MiSClxDVR5ZHar9QZwFenhB3L_8-vIXRA_NHlxqP3iWPQWzSbDizVZ5YO8o3q4fX1XUhismQEMBdpf8AuHvaSyrvYco4WB0&amp;t=634604712479085897"></td><td class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_1"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn11CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn11CheckBox"><span id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext11" class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_0">Physiotherapy Service</span></td>
            </tr>
        </tbody></table><table cellspacing="0" cellpadding="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"><img alt="" src="/WebResource.axd?d=J9BSVEmYJ2R79DzKPp_KwudhxkmRYjt31taLGpqjHFuG3gyciimdNIz2hfef3rMTcgKKF9rZcFetwoS-fvXnw3uYWh88CZ98-dNXPYEoMwTaffwZ0&amp;t=634604712479085897"></div></td><td><img alt="" src="/WebResource.axd?d=Ptpr_s5NKQd2NhXQH_MiSClxDVR5ZHar9QZwFenhB3L_8-vIXRA_NHlxqP3iWPQWzSbDizVZ5YO8o3q4fX1XUhismQEMBdpf8AuHvaSyrvYco4WB0&amp;t=634604712479085897"></td><td class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_1"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn12CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn12CheckBox"><span id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext12" class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_0">Private Medical Centres</span></td>
            </tr>
        </tbody></table><table cellspacing="0" cellpadding="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"><img alt="" src="/WebResource.axd?d=J9BSVEmYJ2R79DzKPp_KwudhxkmRYjt31taLGpqjHFuG3gyciimdNIz2hfef3rMTcgKKF9rZcFetwoS-fvXnw3uYWh88CZ98-dNXPYEoMwTaffwZ0&amp;t=634604712479085897"></div></td><td><img alt="" src="/WebResource.axd?d=BOvsSO2B3BKMupOSRxbma89ER-i_r1FrqfnVsgVq_QiVog3IJUebdD29i4BVAo26-lbJh_BLXmsQGU_VArXhNt6ejiWJk87whzKer6ts-_kM9Vt90&amp;t=634604712479085897"></td><td class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_1"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn13CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn13CheckBox"><span id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext13" class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_0">Psychiatric Outpatient Rehabilitation Centres</span></td>
            </tr>
        </tbody></table><table cellspacing="0" cellpadding="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><img alt="" src="/WebResource.axd?d=BOvsSO2B3BKMupOSRxbma89ER-i_r1FrqfnVsgVq_QiVog3IJUebdD29i4BVAo26-lbJh_BLXmsQGU_VArXhNt6ejiWJk87whzKer6ts-_kM9Vt90&amp;t=634604712479085897"></td><td class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_1"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn14CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn14CheckBox"><span id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext14" class="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index_0">Polyclinics</span></td>
            </tr>
        </tbody></table>
    </div>

Answer 1

改为使用prop()和更改事件（比单击更好）：

$(document).ready(function () {
    $("div[id $= Tree_Index]").find("input[type=checkbox]:first").change(function () {
        $(this).closest("div").find(':checkbox').prop('checked', this.checked);
    });
});

Answer 2

工作 jsFiddle 演示

你的标记太复杂了。因此，在父母和孩子之间建立关系的最佳方式是使用属性而不是 HTML 的层次结构。

考虑以下标记：

<div><input type="checkbox" data-rel="parent" data-id="1" />Parent 1</div>
<div>
    <div><input type="checkbox" data-rel="child" data-id="1" />Child 1.1</div>
    <div><input type="checkbox" data-rel="child" data-id="1" />Child 1.2</div>
    <div><input type="checkbox" data-rel="child" data-id="1" />Child 1.3</div>
    <div><input type="checkbox" data-rel="child" data-id="1" />Child 1.4</div>
</div>

<div><input type="checkbox" data-rel="parent" data-id="2" />Parent 2</div>
<div>
    <div><input type="checkbox" data-rel="child" data-id="2" />Child 2.1</div>
    <div><input type="checkbox" data-rel="child" data-id="2" />Child 2.2</div>
    <div><input type="checkbox" data-rel="child" data-id="2" />Child 2.3</div>
    <div><input type="checkbox" data-rel="child" data-id="2" />Child 2.4</div>
</div>

正如你所看到的，我用data-rel和data-id属性建立了父母和孩子之间的关系。

然后在你的 jQuery 代码中：

$(document).ready(function () {
    // whenever the parent checkbox changed
    $(':checkbox[data-rel="parent"]').on('change', function () {
        // get the current group by data-id attribute
        var id = $(this).attr('data-id');

        // get childs checkboxes within the current group
        $(':checkbox[data-rel="child"][data-id="' + id + '"]').prop('checked', this.checked);
    });
});

---

工作 jsFiddle 演示

因为您说您不能更改您的标记（因为它是 ASP.net 中的控制器），所以这是您的标记的解决方案：

$(function () {
    $('.tree').on('change', ':checkbox', function () {
        var checked = this.checked;
        var $elem = $(this).closest('table');
        var depth = $elem.find('div').length;
        var $childs = $elem.nextAll('table');
        $childs.each(function () {
            var $child = $(this);
            var d = $child.find('div').length;
            if (d <= depth) {
                return false;
            }

            $child.find(':checkbox').prop('checked', checked);
        });
    });
});

• [!]不要忘记查看jsFiddle Demo。

Answer 3

您拥有的标记非常困难，Webforms 以产生像这样可怕的标记而闻名。主要问题是树视图的层次结构实际上并没有反映在标记中的层次结构中。话虽如此，以下 javascript 是实现您正在寻找的结果的一种方式。

在这里小提琴：http: //jsfiddle.net/sLngS/

 $(document).ready(function () {
        $("input:checkbox").change(function () {
           var currentLevel = $(this).parents('tr').children('td').length;
           var isChecked = $(this).prop('checked');
            $('tr').each(function(index, value){
                var level = $('td',this).length;
                if (level >= (currentLevel + 1)){
                    $("input:checkbox", this).prop('checked', isChecked);
                }
            })
        });            
    });