選中父復選框不會選中子項

Question

當嘗試選擇父項時，我試圖獲取一些jquery來檢查子項復選框，但是這沒有發生，我一生無法弄清楚這是什么。

碼：

$('#check-all-parent').click(function(event) {
if(this.checked) { // check select status
    $('#check-all-child').each(function() { //loop through each checkbox
        this.checked = true;  //select all checkboxes with class "checkbox1"               
    });
}else{
    $('#check-all-child').each(function() { //loop through each checkbox
        this.checked = false; //deselect all checkboxes with class "checkbox1"                       
    });         
}  
});

HTML：

<input type="checkbox" id="check-all-parent">hello
<br />
<input type="checkbox" id="check-all-child">hello2

這是jsfidle

Answer 1

使用類而不是id。

HTML

<input type="checkbox" id="check-all-parent">hello
<br />
<input type="checkbox" class="check-all-child">hello2

jQuery的

$('#check-all-parent').click(function(event) {
if(this.checked) { // check select status
    $('.check-all-child').each(function() { //loop through each checkbox
        this.checked = true;  //select all checkboxes with class "checkbox1"               
    });
}else{
    $('.check-all-child').each(function() { //loop through each checkbox
        this.checked = false; //deselect all checkboxes with class "checkbox1"                       
    });         
} 

Answer 2

您的代碼有效，您只需要在jsfiddle中添加jQuery。 單擊Frameworks＆Extensions下的第一個下拉列表，然后選擇jQuery庫（例如： jsfiddle.net/evx9y8g9/3 ）。

您的JS可能會更干凈一些：

$('#check-all-parent').click(function() {
    $("#check-all-child").prop("checked", $(this).prop("checked"));
});

Answer 3

無需使用loop 。 在js中使用class而不是id ：

 $(".check-all-parent").on("click", function() { $(".check-all-child").prop("checked", $(this).prop("checked")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" class="check-all-parent">hello <br /> <input type="checkbox" class="check-all-child">hello2 <br /> <input type="checkbox" class="check-all-child">hello2 <br /> <input type="checkbox" class="check-all-child">hello2 <br /> <input type="checkbox" class="check-all-child">hello2 

Answer 4

如果您有父級和子級復選框，請考慮使用嵌套列表：

<ul id="checkboxes">
  <li>
    <input type="checkbox"> hello
    <ul>
      <li> <input type="checkbox"> hello1 </li>
      <li> <input type="checkbox"> hello2 </li>
    </ul>
  </li>
</ul>

然后用

$('#checkboxes input[type="checkbox"]').on('change', function() {
  $(this)
  .nextAll('ul')
  .find('input[type="checkbox"]')
  .prop('checked', this.checked);
});

 $('#checkboxes input[type="checkbox"]').on('change', function() { $(this) .nextAll('ul') .find('input[type="checkbox"]') .prop('checked', this.checked); }); 

 ul { list-style: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul id="checkboxes"> <li> <input type="checkbox"> hello <ul> <li> <input type="checkbox"> hello1 <ul> <li> <input type="checkbox"> hello11 </li> </ul> </li> <li> <input type="checkbox"> hello2 </li> <li> <input type="checkbox"> hello3 </li> </ul> </li> </ul>