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

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

上层的复选框类不是祖先，因此您需要向上两个最接近的li元素，然后是子复选框类，然后找到input[type="checkbox"] 。

Answer 3

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

我建议阅读“将HTML，CSS和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>