javascript - 为什么这个检查所有复选框的 jQuery 代码不起作用？

Question

HTML:

<table class="responsive" id="products">
    <a href="#" id="checkAllProducts">Do it</a>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</table>

​JS:

$(document).ready(function(){
  $('#checkAllProducts').click(function(){
    var checkbox = $('#products input:checkbox');
    checkbox.attr('checked',!checkbox.attr('checked'));
  });
});​

可用于调试here .

如果我这样做var checkbox = $('input:checkbox');，代码就可以工作。问题可能出在选择器中

此代码应在单击链接后选中所有复选框。但它并没有这样做。为什么？

Answer 1

您的 HTML 无效。您不能将 input 元素直接放入 table 元素内。当浏览器发现下一个元素不能跟随表格标记时，很可能会自动关闭表格标记 - 因此无法找到作为 #products 选择器的子项的复选框。

<div class="responsive" id="products">

成功了。

此外，“checked”是一个属性，因此您应该使用 prop() 来访问它:

checkbox.prop('checked', !checkbox.prop('checked'));

http://jsfiddle.net/UNqfv/6/