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> <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）並且 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>