jQuery：选中“全选”时，选中所有复选框

如何解决jQuery：选中“全选”时，选中所有复选框

我有一个表格，可以打印每个类别的菜单项。我希望在每个类别上都具有一个全选复选框，以便在单击时选中该类别的所有复选框。

问题：有时默认情况下未选中某些复选框，例如数据库中没有数据-在这种情况下，呈现页面时不应选中“全选”复选框（仅在选中其所有子复选框时才应选中它）。

当前的部分实现（即使未选中某些菜单项，对全选是否都已选中？！）

checked = true;

$(".all").click(function() {

  checked = !checked;

  var selectid = this.id.replace(/ /g,'');
  console.log("====>>>" + selectid);
  var item = `${selectid}-item`;
  console.log("===<<<" + item)

  var checkElements = $(`.${selectid}-item`).prop('checked',checked);


  $(selectid + "-item").prop('checked',!checked);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
  <table class="report">
    <br />
    <tr>
      <th colspan='2'></th>
      <th colspan='2'></th>
      <th colspan='2'></th>
    </tr>
    <tr>
      <th colspan='2'>Cats</th>
      <th colspan='2'>Available</th>
      <th colspan='2'><input id="Cats" class="all" type="checkbox" checked="true" /> </th>

    </tr>
    <tr>
      <td colspan='2'>Cat 1</td>
      <td colspan='2'><input name="Cats,cat1" class="Cats-item" type="checkbox" checked="true" /></td>
    </tr>
    <tr>
      <td colspan='2'>Cat 2</td>
      <td colspan='2'><input name="Cats,cat2" class="Cats-item" type="checkbox" checked="true" /></td>
    </tr>
    <tr>
      <td colspan='2'>Cat 3</td>
      <td colspan='2'><input name="Cats,cat3" class="Cats-item" type="checkbox" checked="true" /></td>
    </tr>
  </table>
  <table class="report">
    <br />
    <tr>
      <th colspan='2'></th>
      <th colspan='2'></th>
      <th colspan='2'></th>
    </tr>
    <tr>
      <th colspan='2'>Dogs</th>
      <th colspan='2'>Available</th>
      <th colspan='2'><input id="Dog Big" class="all" type="checkbox" checked="true" /> </th>

    </tr>
    <tr>
      <td colspan='2'>Dog 1</td>
      <td colspan='2'><input name="Dogs,dogs1" class="Dog Big-item" type="checkbox" checked="true" /></td>
    </tr>
    <tr>
      <td colspan='2'>Dog 2</td>
      <td colspan='2'><input name="Dogs,dogs2" class="Dog Big-item" type="checkbox" checked="true" /></td>
    </tr>
    <tr>
      <td colspan='2'>Dog 3</td>
      <td colspan='2'><input name="Dogs,dogs3" class="Dog Big-item" type="checkbox" checked="true" /></td>
    </tr>
  </table>

  <input type="submit" value="Save Setting" style="margin-top:20px; margin-left:0;">
</form>

解决方法

我不得不规范你的课。他们不一致。 ID中没有空格（我从所有ID中都删除了ID） 并且在className之间没有空格，这意味着在一起时会出现某些情况

const checkAll = () => {
  $(".all").each(function() {
    const subClass = $(this).data("class");
    const $sub = $("." + subClass+"-item");
    $(this).prop("checked",$sub.length === $sub.filter(":checked").length)
  })
};
$(function() {
  checkAll(); //on load
  $(".all").on("click",function() {
    const $sub = $("." + $(this).data("class")+"-item"); 
    const checked = this.checked;
    $sub.prop('checked',checked);
  })
  $(".item").on("click",checkAll)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
  <table class="report">
    <br />
    <tr>
      <th colspan='2'></th>
      <th colspan='2'></th>
      <th colspan='2'></th>
    </tr>
    <tr>
      <th colspan='2'>Cats</th>
      <th colspan='2'>Available</th>
      <th colspan='2'><input data-class="Cat" class="all" type="checkbox" checked="true" /> </th>

    </tr>
    <tr>
      <td colspan='2'>Cat 1</td>
      <td colspan='2'><input name="Cats,cat1" class="item Cat-item" type="checkbox" checked="true" /></td>
    </tr>
    <tr>
      <td colspan='2'>Cat 2</td>
      <td colspan='2'><input name="Cats,cat2" class="item Cat-item" type="checkbox" checked="true" /></td>
    </tr>
    <tr>
      <td colspan='2'>Cat 3</td>
      <td colspan='2'><input name="Cats,cat3" class="item Cat-item" type="checkbox" checked="true" /></td>
    </tr>
  </table>
  <table class="report">
    <br />
    <tr>
      <th colspan='2'></th>
      <th colspan='2'></th>
      <th colspan='2'></th>
    </tr>
    <tr>
      <th colspan='2'>Dogs</th>
      <th colspan='2'>Available</th>
      <th colspan='2'><input data-class="Dog_Big" class="all" type="checkbox" checked="true" /> </th>

    </tr>
    <tr>
      <td colspan='2'>Dog 1</td>
      <td colspan='2'><input name="Dogs,dogs1" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
    </tr>
    <tr>
      <td colspan='2'>Dog 2</td>
      <td colspan='2'><input name="Dogs,dogs2" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
    </tr>
    <tr>
      <td colspan='2'>Dog 3</td>
      <td colspan='2'><input name="Dogs,dogs3" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
    </tr>
  </table>

  <input type="submit" value="Save Setting" style="margin-top:20px; margin-left:0;">
</form>