1

I have written code like 

<div style="margin-left:12px;">
    <input type="checkbox" id="chkbox" />
    <span style="margin-left:5px; position:relative; top:2px;" id="lblchkbox">Select All</span>
</div>
<table id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction" border="0">
    <tr>
        <td><input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_0" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$0" /><label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_0">Alabama</label></td><td><input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_1" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$1" /><label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_1">Alaska</label></td><td><input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_2" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$2" /><label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_2">Arizona</label></td>
    </tr>
    <tr>
        <td><input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_3" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$3" /><label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_3">Arkansas</label></td><td><input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_4" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$4" /><label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_4">California</label></td><td><input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_5" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$5" /><label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_5">Colorado</label></td>
   </tr>
   <tr>
       <td><input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_6" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$6" /><label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_6">Connecticut</label></td><td><input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_7" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$7" /><label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_7">Delaware</label></td><td><input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_8" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$8" /><label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_8">District of Columbia</label></td>
    </tr>
    <tr>
        <td><input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_9" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$9" /><label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_9">Florida</label></td><td><input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_10" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$10" /><label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_10">Georgia</label></td><td><input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_11" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$11" /><label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_11">Hawaii</label></td>
    </tr>
    <tr>
        <td><input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_12" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$12" /><label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_12">Idaho</label></td><td><input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_13" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$13" /><label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_13">Illinois</label></td><td><input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_14" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$14" /><label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_14">Indiana</label></td>
    </tr>
    <tr>
        ...
    </tr>
</table>

Now I want that when I will check the checkbox with id "chkbox" then all the checkboxes in the table should be checked and if it is unchecked then all checkboxes in the table should be unchecked...

Please help !!!

Ibrahim Khan
  • 20,616
  • 7
  • 42
  • 55
Nida
  • 1,672
  • 3
  • 35
  • 68

2 Answers2

1

Bind change() event handler and update other checkbox using prop() method. You can use :checkbox to select all checkbox.

$('#chkbox').change(function() {
// change event handler to `chkbox` 
  $(':checkbox').prop('checked', this.checked);
  // updating checked property of all checkbox based on `chkbox`
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="margin-left:12px;">
  <input type="checkbox" id="chkbox" /> <span style="margin-left:5px; position:relative; top:2px;" id="lblchkbox">Select All</span>
</div>

<table id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction" border="0">
  <tr>
    <td>
      <input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_0" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$0" />
      <label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_0">Alabama</label>
    </td>
    <td>
      <input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_1" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$1" />
      <label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_1">Alaska</label>
    </td>
    <td>
      <input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_2" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$2" />
      <label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_2">Arizona</label>
    </td>
  </tr>
  <tr>
    <td>
      <input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_3" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$3" />
      <label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_3">Arkansas</label>
    </td>
    <td>
      <input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_4" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$4" />
      <label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_4">California</label>
    </td>
    <td>
      <input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_5" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$5" />
      <label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_5">Colorado</label>
    </td>
  </tr>
  <tr>
    <td>
      <input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_6" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$6" />
      <label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_6">Connecticut</label>
    </td>
    <td>
      <input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_7" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$7" />
      <label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_7">Delaware</label>
    </td>
    <td>
      <input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_8" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$8" />
      <label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_8">District of Columbia</label>
    </td>
  </tr>
  <tr>
    <td>
      <input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_9" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$9" />
      <label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_9">Florida</label>
    </td>
    <td>
      <input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_10" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$10" />
      <label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_10">Georgia</label>
    </td>
    <td>
      <input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_11" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$11" />
      <label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_11">Hawaii</label>
    </td>
  </tr>
  <tr>
    <td>
      <input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_12" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$12" />
      <label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_12">Idaho</label>
    </td>
    <td>
      <input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_13" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$13" />
      <label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_13">Illinois</label>
    </td>
    <td>
      <input id="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_14" type="checkbox" name="ctl00$cphAgents$UploadDoc$ctlJurisdiction1$chklJurisdiction$14" />
      <label for="ctl00_cphAgents_UploadDoc_ctlJurisdiction1_chklJurisdiction_14">Indiana</label>
    </td>
  </tr>
  <tr>
    ...
  </tr>
</table>
Pranav C Balan
  • 113,687
  • 23
  • 165
  • 188
1

You can do it like following using prop() function.

$('#chkbox').change(function () {
    var all = $('table').find('input[type="checkbox"]');
    if (this.checked) {
        all.prop('checked', true);
    } else {
        all.prop('checked', true);
    }
});
Ibrahim Khan
  • 20,616
  • 7
  • 42
  • 55