无法第二次检查所有表行

Question

我有一个显示数据的HTML表。 尝试进行多项选择时遇到问题。

如果单击<th>上的复选框（将选择所有行），则会选中tbody > tr中的所有复选框-符合预期。 我再次单击，然后全部取消选择-如预期的那样。 如果再次单击th复选框，则不会在tbody中选择任何内容。 如何解决此问题？

 $(document).ready(function() { toggleDeleteButton = function() { // alert($('.selector:checked').length); if ($('.selector:checked').length) { $('.btn-delete-selected').removeClass('disabled'); } else { $('.btn-delete-selected').addClass('disabled'); } } function update_selection(obj) { var state = obj.checked; if (state === undefined) { state = false; } $(obj).closest('table').find('input[type=checkbox][disabled!="disabled"]').attr('checked', state); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table"> <thead> <tr> <th class=""><input onchange="update_selection(this); toggleDeleteButton();" type="checkbox"></th> // Selecting all <th class=""> <a href="#">#</a> </th> <th class=""> <a href="#">Data #1</a> </th> <th class=""> <a href="#">Data #2</a> </th> </tr> </thead> <tbody> <tr class="tr even incomplete "> <td class="center"><input class="selector" value="57696" onchange="toggleDeleteButton();" type="checkbox"></td> <td class="center">3</td> <td class="text-right">£ 1.00</td> <td class="center">Foo</td> </tr> <tr class="tr even incomplete "> <td class="center"><input class="selector" value="57698" onchange="toggleDeleteButton();" type="checkbox"></td> <td class="center">4</td> <td class="text-right">£ 2.50</td> <td class="center">FooBar</td> </tr> <tr class="tr even incomplete "> <td class="center"><input class="selector" value="57720" onchange="toggleDeleteButton();" type="checkbox"></td> <td class="center">5</td> <td class="text-right">£ 3.00</td> <td class="center">Bar</td> </tr> </tbody> </table> 

Answer 1

您遇到的最大问题是，您正在使用on*事件属性。 除了过时之外，这还要求您调用的函数在window范围内可用。 当您在无法正常工作的document.ready处理程序中定义函数时。

为了改进代码并解决问题，请删除on*属性，并使用不引人注意的JS附加事件。 您还可以使用prop()和toggleClass()简化逻辑，如下所示：

 $(document).ready(function() { $('th :checkbox').change(function() { $('.selector').prop('checked', this.checked); $('.btn-delete-selected').prop('disabled', this.checked).toggleClass('disabled', this.checked); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table"> <thead> <tr> <th class=""><input type="checkbox"></th> <th class=""> <a href="#">#</a> </th> <th class=""> <a href="#">Data #1</a> </th> <th class=""> <a href="#">Data #2</a> </th> </tr> </thead> <tbody> <tr class="tr even incomplete "> <td class="center"><input class="selector" value="57696" onchange="toggleDeleteButton();" type="checkbox"></td> <td class="center">3</td> <td class="text-right">£ 1.00</td> <td class="center">Foo</td> </tr> <tr class="tr even incomplete "> <td class="center"><input class="selector" value="57698" onchange="toggleDeleteButton();" type="checkbox"></td> <td class="center">4</td> <td class="text-right">£ 2.50</td> <td class="center">FooBar</td> </tr> <tr class="tr even incomplete "> <td class="center"><input class="selector" value="57720" onchange="toggleDeleteButton();" type="checkbox"></td> <td class="center">5</td> <td class="text-right">£ 3.00</td> <td class="center">Bar</td> </tr> </tbody> </table> 

Answer 2

如果将attr（）更改为prop（），它应该可以正常工作。

$(obj).closest('table').find('input[type=checkbox][disabled!="disabled"]').attr('checked', state);

至

$(obj).closest('table').find('input[type=checkbox][disabled!="disabled"]').prop('checked', state);