CheckBoxList - check all

Question

I have CheckBoxList when I have one default value called "Select All" and rest items binded from database:

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

I would like to have JavaScript or jQuery function which will check all check boxes when user clicks "Select all" and deselect the check boxes when user deselects the "Select All".

-- EDIT 1 Rendered HTML:

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

possible duplicate of http://stackoverflow.com/questions/18537609/jquery-checkbox-check-all — Felipe Pereira, Oct 20 '14 at 14:56
@FelipeP this is not what I am looking for and second thing it wasn't helpful. Additionally nobody marked it as answer. — ironcurtain, Oct 20 '14 at 15:02
take a look at the answer with 27 upvotes, do you try that? (it will need only some changes on the jQuery selector) — Felipe Pereira, Oct 20 '14 at 15:09
@FelipeP Can you please help me find the "Select All" checkbox by value? — ironcurtain, Oct 20 '14 at 17:02

user2019037 · Accepted Answer · 2014-10-20T17:28:52.450

I suggest to use CliendIdMode="static" in your runat="server" elements that you use them in js. You can try this:

$("#ctl00_MainContent_chkBxLstSystemTypes_0").click(function () {
    $(this).parents("table").find(":checkbox").prop("checked", $(this).prop("checked"));
});

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

This is what I was looking for. The one problem is that I have threee diferent sets of the CheckBoxLists and when I click "Select All" on first CheckBoxList, all other are checked. How can I use this only to this first CheckBoxList? — ironcurtain, Oct 20 '14 at 17:23
Then you have to specify the container of the checkboxes. Assuming checkboxes belongs to different tables. Check updated answer. — user2019037, Oct 20 '14 at 17:29
Your update works! Thanks so much. I am beginning working with jQuery and now it is a nightmare for me:( From what I understand in second line you are looking for parent of #ctl00_MainContent_chkBxLstSystemTypes_0 which are type of "checkbox" but what does the ":" mean? — ironcurtain, Oct 20 '14 at 17:35
You are welcome. Is [checkbox](http://api.jquery.com/checkbox-selector/) selector for jquery. — user2019037, Oct 20 '14 at 17:40

score 0 · Answer 2 · answered Oct 20 '14 at 17:35

Add this jQuery code & you are done.

<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/

CheckBoxList - check all

2 Answers2