选中父复选框。 jQuery

Question

基本上我试图写一个js的func，如果我检查一个孩子复选框，父复选框也检查，如果还没有检查。我在这里使用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> 

Answer 1

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

我不得不删除for属性，因为它们引起了问题（在这种情况下并不是必需的），并且有一堆相同的id也不好。

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

Answer 2

使用.prop而不是.attr托运/禁用。见prop documentation。

然后id必须在HTML页面中是唯一的，许多事情不会起作用。

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