用选中父复选框。 jQuery答案

【问题标题】：Check the parent checkbox with . jQuery用选中父复选框。 jQuery
【发布时间】：2014-09-20 16:42:35
【问题描述】：

基本上我正在尝试编写一个 js 函数，如果我选中一个子复选框，父复选框也会检查，如果尚未选中的话。我在这里使用 jquery 是我的 html：

<div class="checkboxes right">
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده  </label>
<div class="child"><label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
</div>
</div>
<div class="sepp"></div>
<div class="checkboxes left">
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<div class="child"><label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
</div>
</div>

  <script>
        $(document).ready(function() {
$('.child input').change(function() {
    if ($(this).is(':checked')) {
        $(this).closest('ul').siblings('input:checkbox').attr('checked', true);
    }
});
    });
        </script>

【问题讨论】：

没有ul 元素

标签： javascript jquery checkbox checked

【解决方案1】：

您只需遍历 DOM 即可到达“父级”复选框。上两层父母会带你到<div class="child">和.prev()会选择div前的标签。最后，.find("input") 将定位到父级label 的输入元素。

我不得不删除 for 属性，因为它们会导致问题（在这种情况下没有必要），并且拥有一堆相同的 ids 也不好。

$(document).ready(function() {
    $('.child input').change(function() {
        if ($(this).is(':checked')) {
            $(this).parent().parent().prev().find("input").prop('checked', true);
        }
    });
});

div.child {
  padding-left: 2em;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkboxes right">
    <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده  </label>
    <div class="child">
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
    </div>
</div>
<div class="sepp"></div>
<div class="checkboxes left">
    <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
    <div class="child">
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
    </div>
</div>

【讨论】：

【解决方案2】：

使用.prop 而不是.attr 进行检查/禁用。见prop documentation。

那么id 必须在 HTML 页面中是唯一的，很多东西都行不通。

没有ul 具有您输入的祖先。

【讨论】：