Question

我遇到问题，目标是此复选框的父级复选框。每当选择子项时，我都需要自动选中父复选框。这是我的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);
});

Answer 1

您可以尝试使用parent

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

Answer 2

上面的复选框类不是祖先，所以你需要上升两个最接近的getChild(int n)元素，然后是子复选框类，然后找到li。

Answer 3

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

我建议阅读Decoupling Your HTML, CSS, and JavaScript - Philip Walton @ Google。

轻微更新你的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>

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

3 个答案: