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:
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