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

使用class而不是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＆amp;下面的第一个下拉列表扩展，并选择一个jQuery库（如：jsfiddle.net/evx9y8g9/3）。

你的JS可能会更清洁一点：

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

Answer 3

无需使用loop。使用class代替id和js：

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

选中父复选框不会检查子项

4 个答案: