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>


白板的微信
浏览 156回答 1
1回答

jeck猫

我不得不规范你的课程。他们不一致。ID 中没有空格(我去掉了所有的 ID)并且 classNames 之间没有空格,这意味着当放在一起时const checkAll = () => {&nbsp; $(".all").each(function() {&nbsp; &nbsp; const subClass = $(this).data("class");&nbsp; &nbsp; const $sub = $("." + subClass+"-item");&nbsp; &nbsp; $(this).prop("checked", $sub.length === $sub.filter(":checked").length)&nbsp; })};$(function() {&nbsp; checkAll(); //on load&nbsp; $(".all").on("click", function() {&nbsp; &nbsp; const $sub = $("." + $(this).data("class")+"-item");&nbsp;&nbsp; &nbsp; const checked = this.checked;&nbsp; &nbsp; $sub.prop('checked', checked);&nbsp; })&nbsp; $(".item").on("click", checkAll)})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form method="post">&nbsp; <table class="report">&nbsp; &nbsp; <br />&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th colspan='2'></th>&nbsp; &nbsp; &nbsp; <th colspan='2'></th>&nbsp; &nbsp; &nbsp; <th colspan='2'></th>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th colspan='2'>Cats</th>&nbsp; &nbsp; &nbsp; <th colspan='2'>Available</th>&nbsp; &nbsp; &nbsp; <th colspan='2'><input data-class="Cat" class="all" type="checkbox" checked="true" /> </th>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td colspan='2'>Cat 1</td>&nbsp; &nbsp; &nbsp; <td colspan='2'><input name="Cats,cat1" class="item Cat-item" type="checkbox" checked="true" /></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td colspan='2'>Cat 2</td>&nbsp; &nbsp; &nbsp; <td colspan='2'><input name="Cats,cat2" class="item Cat-item" type="checkbox" checked="true" /></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td colspan='2'>Cat 3</td>&nbsp; &nbsp; &nbsp; <td colspan='2'><input name="Cats,cat3" class="item Cat-item" type="checkbox" checked="true" /></td>&nbsp; &nbsp; </tr>&nbsp; </table>&nbsp; <table class="report">&nbsp; &nbsp; <br />&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th colspan='2'></th>&nbsp; &nbsp; &nbsp; <th colspan='2'></th>&nbsp; &nbsp; &nbsp; <th colspan='2'></th>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th colspan='2'>Dogs</th>&nbsp; &nbsp; &nbsp; <th colspan='2'>Available</th>&nbsp; &nbsp; &nbsp; <th colspan='2'><input data-class="Dog_Big" class="all" type="checkbox" checked="true" /> </th>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td colspan='2'>Dog 1</td>&nbsp; &nbsp; &nbsp; <td colspan='2'><input name="Dogs,dogs1" class="item Dog_Big-item" type="checkbox" checked="true" /></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td colspan='2'>Dog 2</td>&nbsp; &nbsp; &nbsp; <td colspan='2'><input name="Dogs,dogs2" class="item Dog_Big-item" type="checkbox" checked="true" /></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td colspan='2'>Dog 3</td>&nbsp; &nbsp; &nbsp; <td colspan='2'><input name="Dogs,dogs3" class="item Dog_Big-item" type="checkbox" checked="true" /></td>&nbsp; &nbsp; </tr>&nbsp; </table>&nbsp; <input type="submit" value="Save Setting" style="margin-top:20px; margin-left:0;"></form>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript