Jquery：选中“全选”时选中所有复选框

Question

我有一个表格，可以打印每个类别的菜单项。我想在每个类别上都有一个全选复选框，以便在单击时选中该类别的所有复选框。问题：有时，默认情况下未检查某些复选框，例如数据库中没有数据 - 在这种情况下，选择所有复选框时，请勿在渲染页面时检查所有复选框（仅当检查了所有子弹复选框时，才应检查一下）。当前的部分实现（即使未选中某些菜单项，也选中所有选择的内容为真？！）：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>

Answer 1

我不得不规范你的课程。他们不一致。ID 中没有空格（我去掉了所有的 ID）并且 classNames 之间没有空格，这意味着当放在一起时

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>