check marking all the checkbox using jquery on click of a button
This is how my table structure looks,
<table>
<tbody>
<tr>
<td id="**SelectCheckBox**" class="helpBod">
<input id="TimeSheetWebUserControl1_TimeSheetRe开发者_如何学Gopeater_ctl01_CheckBox0" type="checkbox" name="TimeSheetWebUserControl1$TimeSheetRepeater$ctl01$CheckBox0"/>
</td>
<td>
</td>
</tr>
<tr>
<td id="**SelectCheckBox**" class="helpBod">
<input id="TimeSheetWebUserControl1_TimeSheetRepeater_ctl02_CheckBox1" type="checkbox" name="TimeSheetWebUserControl1$TimeSheetRepeater$ctl02$CheckBox1"/>
</td>
<td>
</td>
</tr>
<tr>
</tbody>
</table>
I have a button SelectAll im going to call a jquery function to check mark all the checkbox
function look this
function jqCheckAll() {
$("td#" + 'SelectCheckBox' + 'input:checkbox').attr('checked', true);
}
problem is this will check mark only only checkbox what if i have 100 checkbox, i want to check mark all the this 100 checkbox on click of select all button.
@sameer, what you want to do is add a class to all the checkboxes you want checked. Here I added a class "checkall" to the checkboxes that will be checked.
<input type="button" name="checkit" id="checkit" value="Check All">
<table>
<tbody>
<tr>
<td>
<input type="checkbox" class="checkall" name="TimeSheetWebUserControl1$TimeSheetRepeater$ctl01$CheckBox0" id="TimeSheetWebUserControl1_TimeSheetRepeater_ctl01_CheckBox0" />
</td>
<td>
<input type="checkbox" name="chk1" id="chk1" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkall" name="TimeSheetWebUserControl1$TimeSheetRepeater$ctl02$CheckBox1" id="TimeSheetWebUserControl1_TimeSheetRepeater_ctl02_CheckBox1" />
</td>
<td>
<input type="checkbox" name="chk2" id="chk2" />
</td>
</tr>
<tr>
</tbody>
</table>
The jQuery is then simple.
$('#checkit').click(function() {
$('input:checkbox.checkall').attr('checked','checked');
return false;
});
First, I can't really tell what you mean by "SelectCheckBox"; you cannot give all your checkboxes the same "id" value.
To check all the checkboxes in all the "helpBod" td elements, just do this:
$('td.helpBod input:checkbox').attr('checked', true);
function jqCheckAll() {
$("input:checkbox").attr('checked','checked');
}
Update, only checking in a single column:
Assuming your select_all
button is inside the same td
as the checkboxes, just do this:
$('td.helpBod .select_all').click(function(e){
e.preventDefault();
$(this).closest('td.helpBod').find(':checkbox').attr('checked', 'checked');
});
Again, that assumes your HTML looks something like this (the select_all
doesn't have to be a button):
<td class="helpBod" ... >
<button class="select_all">Select All</button>
<input type="checkbox" ... />
<input type="checkbox" ... />
<input type="checkbox" ... />
<input type="checkbox" ... />
</td>
If I understand what youre asking the easiest way to do that would be
$('.helpBod input:checkbox').attr('checked','checked');
This only checks the ones you have that class on, so you wont affect other checkboxes you might have elsewhere.
精彩评论