选中子复选框时如何定位此特定父复选框答案

【问题标题】：How to target this specific parent's checkbox when child checkbox is selected选中子复选框时如何定位此特定父复选框
【发布时间】：2016-12-02 02:14:43
【问题描述】：

我在定位此复选框父复选框时遇到问题。 I need the parent checkbox to be automatically selected whenever the child is selected.这是我的 HTML。一个小问题是我需要选择的父 div 与层次结构中紧邻更高的一个类具有相同的类，即.checkbox

<ul class="term-reference">
    <li>
        <div class="checkbox"> 
            <label class="control-label">
                <input type="checkbox" class="form-checkbox">Parent Label
            </label>
        </div>
        <ul class="term-reference">
            <li>
                <div class="checkbox">
                    <label class="control-label"">
                        <input type="checkbox" class="form-checkbox">Child Label
                    </label>
                </div>
            </li>
        </ul>
    </li>
</ul>

我尝试了以下方法但无济于事，非常感谢您在这里提供的任何帮助

$('ul.term-reference li ul li input.form-checkbox').click(function() {
    $(this).closest('.checkbox').closest('.checkbox').find('input.form-checkbox').prop('checked', true);
});

【问题讨论】：

什么？你能不能更好地解释一下并起一个独特的名字，这样这个问题就可以理解了。
$('ul.term-reference li ul li input.form-checkbox').click(function() { $(this).closest('.term-reference').siblings( '.checkbox').find('input.form-checkbox').prop('checked', true); });试试这个
你可以试试我的解决方案 :: stackoverflow.com/questions/14853568/…

标签： javascript jquery

【解决方案1】：

虽然我在这里阅读的答案很可能有效，但它们似乎与 html 紧密耦合（这意味着如果您更改 html，您的 jQuery 可能无法工作）并且不可重复使用（并且具有可能导致其他复选框被选中，即使它们不应该被选中）。

对您的 html 和可重用 jQuery 的轻微更新：

    $(document).ready(function(){
      $('.checkbox-container .checkbox-child').on('click', function() {
        var $childCheckbox = $(this);
        if ($childCheckbox.is(":checked")){
          $childCheckbox
            .closest('.checkbox-container')
            .find('.checkbox-parent')
            .prop("checked", true);
        }
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="term-reference checkbox-container">
  <li>
    <div class="checkbox"> 
      <label class="control-label">
        <input type="checkbox" class="form-checkbox checkbox-parent">Parent Label
   	      </label>
    </div>
    <ul class="term-reference">
      <li>
        <div class="checkbox">
          <label class="control-label"">
            <input type="checkbox" class="form-checkbox checkbox-child">Child Label
          </label>
        </div>
      </li>
      <li>
        <div class="checkbox">
          <label class="control-label"">
            <input type="checkbox" class="form-checkbox checkbox-child">Child Label
          </label>
        </div>
      </li>
      <li>
        <div class="checkbox">
          <label class="control-label"">
            <input type="checkbox" class="form-checkbox checkbox-child">Child Label
          </label>
        </div>
      </li>
    </ul>
  </li>
</ul>

【讨论】：

谢谢，但是，编辑 HTML 是不可能的，但是我设法使用 jQuery 将某些类添加到 html 中，这使我能够更好地定位某些元素

【解决方案2】：

你可以试试parent

$(this).parent().closest('.checkbox').find('input.form-checkbox').prop('checked', true);

【讨论】：

不幸的是不起作用，也许用jQuery向ul中的每个父li添加一个唯一的类是最简单的

【解决方案3】：

上面的复选框类不是祖先，所以你需要上两个最接近的li元素，然后是子复选框类，然后找到input[type="checkbox"]。

【讨论】：

是的，但是如何上两级？
最接近的('li').closest('li')