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

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

<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');。问题可能发生在选择器

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

来源

2012-08-11 Andrei Botalov

就类似

var checkbox = $('#products tr td input:checkbox');

，因为我知道一个表可以包含任何块级或内联元素，只要表格式正确。问题是，表中必须有这样的东西td，tr和狗屎，来定义它的行和列，如果你尝试：

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

它会工作得很好，然后你可以这样做：

$(function(){ 
    $('#checkAllProducts').on('click', function(e){ 
     e.preventDefault(); 
     var checkbox = $('#products input[type="checkbox"]'); 
     checkbox.prop('checked', !checkbox.prop('checked')); 
    }); 
});

FIDDLE

来源

2012-08-11 19:35:01 adeneo

var checkbox = $('#products input:checkbox');

checkbox不是一个复选框，你需要调用.each()做操作上的所有复选框..

来源

2012-08-11 16:03:49

代码有效，如果我做'var checkbox = $（'input：checkbox'）;'。问题在于选择器 – 2012-08-11 16:04:49

+1，因为你处理了'.each'。在Niko（+1）的演示中，如果您选中第一个复选框并按下“执行”，它会将其他参数设置为第一个复选框的选中值的倒数。另外，尽管我非常喜欢速记选择器，但在jQuery 1.8中，'：checkbox'和其他输入选择器被归类为“弃用”，因为它们不提供本机DOM [QSA]（https://developer.mozilla.org/） En/DOM/Document.querySelectorAll）性能提升。 '（' – 2012-08-11 16:09:14

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

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

有窍门。

此外， “检查” 是一个属性，所以你应该使用道具（）来访问它：

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

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

来源

2012-08-11 16:05:29 Niko

HTML表格元素必须包含TR，td标签。

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

和你选择的代码应该是调试here

来源

2012-08-11 17:47:04

利用这一点，它会工作得很好：

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

});

原因是你需要指定“所有检查bockes”。在使用选择器“$（'＃products input：checkbox'）;”的时刻，您只能选择ID为“产品”的复选框。如果每个名为“products”的复选框都有一个id属性，那么您的原始代码就可以工作。相反，我上面给出的选择器将选择任何复选框类型。希望这有助于解释清楚！快乐的编码！

来源

2012-08-12 00:07:30 Ronny

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

回答

相关问题