選中父複選框。 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有您的輸入的祖先。