Tutorial :check marking all the checkbox using jquery on click of a button



Question:

This is how my table structure looks,

 <table>      <tbody>         <tr>      <td id="**SelectCheckBox**" class="helpBod">      <input id="TimeSheetWebUserControl1_TimeSheetRepeater_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.


Solution:1

@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;  });  


Solution:2

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);  


Solution:3

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>  


Solution:4

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.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »