如何使用 jquery 从“更改”事件访问父元素

Question

I have the following code:

JavaScript:

        jQuery(".cbChild").on("change", function () {
            //go to parent checkbox to see if it's check.  If not, check it.
            var parentElement = jQuery(this).closest('cbParentContainer');

            //I've also tried
            //var parentElement = jQuery(this).parentsUntil('cbParentContainer');
            //And
            //var parentElement = jQuery(this).parentsUntil('row');

            if (jQuery(this).find('input[type=checkbox]').prop("checked")) {
                parentElement.prop("checked", true);
            }
        });

HTML:

<div class="cbEventsContainer">
<div class="row">
    <span class="col-sm-4 cbParent"><input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00" type="checkbox">
        <label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00">Connect with Digital Services</label>
    </span>
</div>
<div class="cbChildContainer">        
    <div class="row">
        <div class="col-xs-1">                            
        </div>
        <span class="checkbox col-sm-11 cbChild">
            <input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl00$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00" type="checkbox">
            <label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00">Event 1</label>
        </span>

    </div>

    <div class="row">
        <div class="col-xs-1">                            
        </div>
        <span class="checkbox col-sm-11 cbChild">
            <input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl01$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00" type="checkbox">
            <label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00">Event 2</label>
        </span>

    </div>        
</div>

When one of the child checkboxes (class='cbChild') gets checked, I want to force the parent (class='cbParent') checkbox to also be checked. However, I'm unable to access the parent for some reason. The call to parentElement.prop("checked", true) fails because parentElement isn't the parent checkbox. To further clarify the issue, there are multiple cbEventsConainers with more parent/child checkboxes. I only included one for this post.

Answer 1

We are not dealing with a child-parent relationship here but the following will check the "parent" checkbox when at least one of the children is checked and will uncheck it otherwise.

 $(function(){ $("body").on("change",".cbChild input",function(){ var cc=$(this).closest(".cbChildContainer"),p=cc.prev("div").find(".cbParent input"); p.prop("checked",$(".cbChild input:checked",cc).length>0); }); });

 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <div class="cbEventsContainer"> <div class="row"> <span class="col-sm-4 cbParent"><input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00" type="checkbox"> <label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00">Connect with Digital Services</label> </span> </div> <div class="cbChildContainer"> <div class="row"> <div class="col-xs-1"> </div> <span class="checkbox col-sm-11 cbChild"> <input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl00$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00" type="checkbox"> <label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00">Event 1</label> </span> </div> <div class="row"> <div class="col-xs-1"> </div> <span class="checkbox col-sm-11 cbChild"> <input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl01$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00" type="checkbox"> <label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00">Event 2</label> </span> </div> </div>