Jquery: Select 选中 'select all' 时的所有复选框

Question

我有一个表单可以打印每个类别的菜单项。我想在每个类别上都有一个 select 全部复选框，这样当单击时，该类别的所有复选框都会被 selected。

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

当前的部分实施（检查 select 全部为真，即使它的一些菜单项没有检查？！）：

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>

Answer 1

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

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>

Jquery: Select 选中 'select all' 时的所有复选框

Jquery: Select all check boxes when 'select all' is checked

javascript

checkbox

jquery

drop-down-menu