如何选中所有复选框？

时间：2016-02-04 09:30:46

标签： jquery jquery-ui checkbox

我写了像

这样的代码 
<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>

现在我希望在我选中id＆＃34; chkbox＆＃34;的复选框时然后应检查表格中的所有复选框，如果未选中，则应取消选中表格中的所有复选框......

请帮忙!!!

2 个答案:

答案 0 :(得分：1)

绑定 change() 事件处理程序，并使用 prop() 方法更新其他复选框。您可以使用 :checkbox 选中所有复选框。

＆＃13;
＆＃13; 
$('#chkbox').change(function() {
// change event handler to `chkbox` 
  $(':checkbox').prop('checked', this.checked);
  // updating checked property of all checkbox based on `chkbox`
})
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您可以像使用prop()函数一样执行此操作。

$('#chkbox').change(function () {
    var all = $('table').find('input[type="checkbox"]');
    if (this.checked) {
        all.prop('checked', true);
    } else {
        all.prop('checked', true);
    }
});
相关问题
最新问题