如何在复选框更改事件上找到 div 而不是在 jquery 选择器中硬编码 div id？答案

【问题标题】：How to find div on checkbox change event instead of hardcoding div id in jquery selector?如何在复选框更改事件上找到 div 而不是在 jquery 选择器中硬编码 div id？
【发布时间】：2015-12-12 05:18:36
【问题描述】：

我想使用 jquery 函数查找复选框更改事件中的所有 div，而不是在 jquery 选择器中硬编码 id 和 class 名称。

我的代码中有 2 个部分，ID 名称为 section1 和 section2 等等 chkall 事件我想找到这个 div id 并将其作为 jquery 选择器传递

这是我的代码：

HTML：

<div class="header">
        <asp:CheckBox ID="chkAll" CssClass="checkallparent" runat="server" Text="Select All" />
    </div>
    <div class="abc">
        <ul class="list">
            <div id="section1" class="section"> 
                <li class="carousel-border">
                    <input type="checkbox" id="chkParent1" class="chkParent" /> --Parent of below 2 checkboxes
                </li>
                <li>
                    <input type="checkbox" id="chkchild1" class="chkChild"/>
                </li>
                <li>
                    <input type="checkbox" id="chkchild2" class="chkChild"/>
                </li>
            </div>

            <div id="section2" class="section">
                <li class="carousel-border">
                    <input type="checkbox" id="chkParent2" class="chkParent" />--Parent of below 2 checkboxes
                </li>
                <li>
                    <input type="checkbox" id="chkchild3" class="chkChild" />
                </li>
                <li>
                    <input type="checkbox" id="chkchild4" class="chkChild"/>
                </li>
            </div>
        </ul>
    </div>

脚本：

$(".checkallparent").change(function () {
    //on this event i want to check all my checkboxes and this is how i am doing.
    if ($("#chkAll").prop('checked') == true) {
        //for section 1
        $(this).find('input:checkbox[id^="chkParent1"]').prop('checked', true)
        $(this).closest('.section').find('input:checkbox[id^="chkchild1"]').prop('checked', true);
        $(this).closest('.section').find('input:checkbox[id^="chkchild2"]').prop('checked', true);
        // Above is not working but when i do like below it is working
        $("#section1 .chkParent").find('input:checkbox[id^="chkParent1"]').prop('checked', true)
        $("#section1 .chkParent").closest('.section').find('input:checkbox[id^="chkchild1"]').prop('checked', true);
        $("#section1 .chkParent").closest('.section').find('input:checkbox[id^="chkchild2"]').prop('checked', true);

        //I dont want to hardcode like this instead i would like to use any jquery function 
        //which would find this 1st div and 2nd(for eg section1 and section2 etc... )

    }
});

那么谁能告诉我怎么做呢？

【问题讨论】：

标签： javascript jquery checkbox jquery-selectors

【解决方案1】：

这段代码应该可以帮助您解决这个问题。第一个change 事件设置父复选框，然后触发这些父复选框的更改事件。

第二个更改事件处理父项。

$(".checkallparent").change(function () {
    var checked = $(this).is(":checked");
    var parentCBs = $("input[type='checkbox'].chkParent");
    parentCBs.each(function(i, el) {
        el.checked = checked;
        $(el).trigger("change");
    });
});
$("input[type='checkbox'].chkParent").change(function () {
    var checked = $(this).is(":checked");
    var div = $(this).closest("div");
    var childCBs = div.find("input[type='checkbox'].chkChild");
    childCBs.each(function(i, el) {
        el.checked = checked;
    });
});

Here is a working Fiddle.

【讨论】：