Jquery选择表中的所有复选框 [英] Jquery select all checkboxes in table

问题描述

我有一个脚本应该检查表中的所有复选框。它第一次检查它们，它之后取消选中它们。

 <$ c 
 $ c> $（'＃selectAll'）。click（function（e）{
 var table = $（e.target）.closest（'table'）; 
 $（'td input：checkbox '，table）.attr（'checked'，e.target.checked）; 
}）; 
  

HTML：

 < table> 
< tr> 
< th> 
< input type =checkid =selectAll/> 
< / th> 
< th> 
 hi！ 
< / th> 
< / tr> 
< tr> 
< td> 
< input type =checkboxid =1/> 
< / td> 
< td> 
 hi！ 
< / td> 
< / tr> 
< tr> 
< td> 
< input type =checkboxid =2/> 
< / td> 
< td> 
 hi！ 
< / td> 
< / tr> 
< / table> 
  

这里有一个小小的行为：

http://jsfiddle.net/EEJrU/

为什么是在您点击一次之后无法正常工作？

解决方案

您需要使用。prop（），而不是 .attr（）

  $（'＃selectAll'）click（function（e）{
 var table = $（e.target）.closest ; 
 $（'td input：checkbox'，table）.prop（'checked'，this.checked）; 
}）; 
  

演示：小提琴

属性与属性

I have a script that should check all the checkboxes in a table. It checks them all the first time, it unchecks them after that. However, when I try to recheck them nothing happens.

the jquery:

$('#selectAll').click(function(e){
    var table= $(e.target).closest('table');
    $('td input:checkbox',table).attr('checked',e.target.checked);
});

the HTML:

<table>
    <tr>
        <th>
            <input type="checkbox" id="selectAll" />
        </th>
        <th>
            hi!
        </th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="1"/>
        </td>
        <td>
            hi!
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="2"/>
        </td>
        <td>
            hi!
        </td>
    </tr>
</table>

here's a fiddle of the behavior:

http://jsfiddle.net/EEJrU/

Why is it not working after being clicked once?

解决方案

You need to use .prop() instead of .attr()

$('#selectAll').click(function(e){
    var table= $(e.target).closest('table');
    $('td input:checkbox',table).prop('checked',this.checked);
});

Demo: Fiddle

Attributes vs. Properties

这篇关于Jquery选择表中的所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！