时间戳

首页 > 解决方案 > 如何使用 jquery 从“更改”事件中访问父元素

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

问题描述

我有以下代码：

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>

当其中一个子复选框 (class='cbChild') 被选中时，我想强制父 (class='cbParent') 复选框也被选中。但是，由于某种原因，我无法访问父级。对 parentElement.prop("checked", true) 的调用失败，因为 parentElement 不是父复选框。为了进一步澄清这个问题，有多个带有更多父/子复选框的 cbEventsConainers。我只为这篇文章添加了一个。

标签： javascripthtmljquerydom

解决方案

我们在这里不处理子-父关系，但是当至少有一个子被选中时，以下将选中“父”复选框，否则将取消选中它。

$(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>

推荐阅读