CheckBoxList - 全部检查

时间：2014-10-20 14:51:55

标签： javascript jquery asp.net

当我有一个名为＆＃34;选择全部＆＃34;的默认值时，我有CheckBoxList和数据绑定的其他项目：

<asp:CheckBoxList runat="server" ID="chkBxLstSystemTypes" CssClass="chkBxList" RepeatDirection="Horizontal" RepeatColumns="10" TabIndex="2">
<asp:ListItem Value="SelectAll">Select All</asp:ListItem>

我想拥有JavaScript或jQuery函数，当用户点击时会检查所有复选框＆＃34;选择全部＆＃34;当用户取消选择＆＃34;全选＆＃34;。

时，取消选中复选框

- 编辑1 呈现HTML：

＆＃13;
＆＃13; 
<table id="ctl00_MainContent_chkBxLstSystemTypes" class="chkBxList" border="0">
  <tr>
    <td>
      <input id="ctl00_MainContent_chkBxLstSystemTypes_0" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$0" tabindex="2" />
      <label for="ctl00_MainContent_chkBxLstSystemTypes_0">Select All</label>
    </td>
    <td>
      <input id="ctl00_MainContent_chkBxLstSystemTypes_1" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$1" tabindex="2" />
      <label for="ctl00_MainContent_chkBxLstSystemTypes_1">ASG</label>
    </td>
    <td>
      <input id="ctl00_MainContent_chkBxLstSystemTypes_2" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$2" tabindex="2" />
      <label for="ctl00_MainContent_chkBxLstSystemTypes_2">AVP</label>
    </td>
    <td>
      <input id="ctl00_MainContent_chkBxLstSystemTypes_3" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$3" tabindex="2" />
      <label for="ctl00_MainContent_chkBxLstSystemTypes_3">CDR</label>
    </td>
    <td>
      <input id="ctl00_MainContent_chkBxLstSystemTypes_4" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$4" tabindex="2" />
      <label for="ctl00_MainContent_chkBxLstSystemTypes_4">CMS</label>
    </td>
    <td>
      <input id="ctl00_MainContent_chkBxLstSystemTypes_5" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$5" tabindex="2" />
      <label for="ctl00_MainContent_chkBxLstSystemTypes_5">CUCM_Logins</label>
    </td>
    <td>
      <input id="ctl00_MainContent_chkBxLstSystemTypes_6" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$6" tabindex="2" />
      <label for="ctl00_MainContent_chkBxLstSystemTypes_6">CUCM_Subscribers</label>
    </td>
    <td>
      <input id="ctl00_MainContent_chkBxLstSystemTypes_7" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$7" tabindex="2" />
      <label for="ctl00_MainContent_chkBxLstSystemTypes_7">Cybertech</label>
    </td>
    <td>
      <input id="ctl00_MainContent_chkBxLstSystemTypes_8" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$8" tabindex="2" />
      <label for="ctl00_MainContent_chkBxLstSystemTypes_8">eHealth</label>
    </td>
    <td>
      <input id="ctl00_MainContent_chkBxLstSystemTypes_9" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$9" tabindex="2" />
      <label for="ctl00_MainContent_chkBxLstSystemTypes_9">Intuity</label>
    </td>
  </tr>
  <tr>
    <td>
      <input id="ctl00_MainContent_chkBxLstSystemTypes_10" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$10" tabindex="2" />
      <label for="ctl00_MainContent_chkBxLstSystemTypes_10">MMSMailbox</label>
    </td>
    <td>
      <input id="ctl00_MainContent_chkBxLstSystemTypes_11" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$11" tabindex="2" />
      <label for="ctl00_MainContent_chkBxLstSystemTypes_11">MMSUser</label>
    </td>
    <td>
      <input id="ctl00_MainContent_chkBxLstSystemTypes_12" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$12" tabindex="2" />
      <label for="ctl00_MainContent_chkBxLstSystemTypes_12">NICE Perform</label>
    </td>
    <td>
      <input id="ctl00_MainContent_chkBxLstSystemTypes_13" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$13" tabindex="2" />
      <label for="ctl00_MainContent_chkBxLstSystemTypes_13">PBX</label>
    </td>
    <td>
      <input id="ctl00_MainContent_chkBxLstSystemTypes_14" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$14" tabindex="2" />
      <label for="ctl00_MainContent_chkBxLstSystemTypes_14">UNITY</label>
    </td>
    <td>
      <input id="ctl00_MainContent_chkBxLstSystemTypes_15" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$15" tabindex="2" />
      <label for="ctl00_MainContent_chkBxLstSystemTypes_15">VoIP</label>
    </td>
    <td>
      <input id="ctl00_MainContent_chkBxLstSystemTypes_16" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$16" tabindex="2" />
      <label for="ctl00_MainContent_chkBxLstSystemTypes_16">WebEx</label>
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

我建议您在js中使用它们的CliendIdMode="static"元素中使用runat="server"。你可以试试这个：

＆＃13;
＆＃13; 
$("#ctl00_MainContent_chkBxLstSystemTypes_0").click(function () {
    $(this).parents("table").find(":checkbox").prop("checked", $(this).prop("checked"));
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="ctl00_MainContent_chkBxLstSystemTypes" class="chkBxList" border="0">
    <tr>
        <td>
            <input id="ctl00_MainContent_chkBxLstSystemTypes_0" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$0" tabindex="2" />
            <label for="ctl00_MainContent_chkBxLstSystemTypes_0">Select All</label>
        </td>
        <td>
            <input id="ctl00_MainContent_chkBxLstSystemTypes_1" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$1" tabindex="2" />
            <label for="ctl00_MainContent_chkBxLstSystemTypes_1">ASG</label>
        </td>
        <td>
            <input id="ctl00_MainContent_chkBxLstSystemTypes_2" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$2" tabindex="2" />
            <label for="ctl00_MainContent_chkBxLstSystemTypes_2">AVP</label>
        </td>
        <td>
            <input id="ctl00_MainContent_chkBxLstSystemTypes_3" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$3" tabindex="2" />
            <label for="ctl00_MainContent_chkBxLstSystemTypes_3">CDR</label>
        </td>
        <td>
            <input id="ctl00_MainContent_chkBxLstSystemTypes_4" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$4" tabindex="2" />
            <label for="ctl00_MainContent_chkBxLstSystemTypes_4">CMS</label>
        </td>
        <td>
            <input id="ctl00_MainContent_chkBxLstSystemTypes_5" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$5" tabindex="2" />
            <label for="ctl00_MainContent_chkBxLstSystemTypes_5">CUCM_Logins</label>
        </td>
        <td>
            <input id="ctl00_MainContent_chkBxLstSystemTypes_6" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$6" tabindex="2" />
            <label for="ctl00_MainContent_chkBxLstSystemTypes_6">CUCM_Subscribers</label>
        </td>
        <td>
            <input id="ctl00_MainContent_chkBxLstSystemTypes_7" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$7" tabindex="2" />
            <label for="ctl00_MainContent_chkBxLstSystemTypes_7">Cybertech</label>
        </td>
        <td>
            <input id="ctl00_MainContent_chkBxLstSystemTypes_8" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$8" tabindex="2" />
            <label for="ctl00_MainContent_chkBxLstSystemTypes_8">eHealth</label>
        </td>
        <td>
            <input id="ctl00_MainContent_chkBxLstSystemTypes_9" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$9" tabindex="2" />
            <label for="ctl00_MainContent_chkBxLstSystemTypes_9">Intuity</label>
        </td>
    </tr>
    <tr>
        <td>
            <input id="ctl00_MainContent_chkBxLstSystemTypes_10" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$10" tabindex="2" />
            <label for="ctl00_MainContent_chkBxLstSystemTypes_10">MMSMailbox</label>
        </td>
        <td>
            <input id="ctl00_MainContent_chkBxLstSystemTypes_11" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$11" tabindex="2" />
            <label for="ctl00_MainContent_chkBxLstSystemTypes_11">MMSUser</label>
        </td>
        <td>
            <input id="ctl00_MainContent_chkBxLstSystemTypes_12" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$12" tabindex="2" />
            <label for="ctl00_MainContent_chkBxLstSystemTypes_12">NICE Perform</label>
        </td>
        <td>
            <input id="ctl00_MainContent_chkBxLstSystemTypes_13" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$13" tabindex="2" />
            <label for="ctl00_MainContent_chkBxLstSystemTypes_13">PBX</label>
        </td>
        <td>
            <input id="ctl00_MainContent_chkBxLstSystemTypes_14" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$14" tabindex="2" />
            <label for="ctl00_MainContent_chkBxLstSystemTypes_14">UNITY</label>
        </td>
        <td>
            <input id="ctl00_MainContent_chkBxLstSystemTypes_15" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$15" tabindex="2" />
            <label for="ctl00_MainContent_chkBxLstSystemTypes_15">VoIP</label>
        </td>
        <td>
            <input id="ctl00_MainContent_chkBxLstSystemTypes_16" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$16" tabindex="2" />
            <label for="ctl00_MainContent_chkBxLstSystemTypes_16">WebEx</label>
        </td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

添加此jQuery代码＆amp;你完成了。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('.chkBxList input:checkbox:first').change(function(){
  var status = $(this).is(':checked');
  $('.chkBxList input:checkbox').prop('checked', status);
});
</script>

Jsfiddle： http://jsfiddle.net/y9dhwx72/

相关问题
最新问题