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

Posted 2023-05-09

【中文标题】如何使用 jquery 从“更改”事件中访问父元素

【英文标题】：How to access parent element from 'change' event using jquery

【发布时间】：2021-06-01 10:29:33

【问题描述】：

我有以下代码：

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。我只为这篇文章添加了一个。

【问题讨论】：

他们不是父子，都是堂兄弟。类名不授予 DOM 中的关系。

cbParentContainer 是复选框的父容器，我无法访问它。我不是说类名授予任何关系。但是 cbParentContainer 封装了列表中最顶层的复选框是我们的根复选框。如果检查了其他两个中的任何一个，则也必须对其进行检查。

【参考方案1】：

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

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

【讨论】：

我修改了你的代码也做了相反的事情。如果未选中“父”复选框，则现在取消选中所有“子”复选框。非常有帮助 - 再次感谢。