使用jquery在treeview中检查子项的Checkbox时选择所有子子项

时间：2013-05-30 10:20:43

标签： jquery asp.net jquery-ui

我正在使用此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>

3 个答案:

答案 0 :(得分：0)

使用prop()并更改事件（优于点击）：

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

答案 1 :(得分：0)

Working jsFiddle Demo

你的标记太复杂了。所以，建立关系的最佳方式 您的父母和孩子正在使用属性而非 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);
    });
});

Working jsFiddle Demo

因为你说你不能改变你的标记（因为它是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);
        });
    });
});

答案 2 :(得分：0)

对于你拥有的标记来说，这是非常困难的，因为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);
                }
            })
        });            
    });
相关问题
最新问题