Select All Items in asp.net CheckBoxList

Question

ASP.NET and C#.

I'd like to have a CheckboxList with a "Select All" item.

When this particular item is selected, all others will be selected too.
When selection is removed from this item, so too will it be from all others items.
Checking/Unchecking of any other items will only have an effect on that particular item regardless of the selection state of "Select All" item.

I am looking for a jquery solution to this.

Here is the databinding code in my codebehind:

IList<Central> Centrals = new CentralProvider().GetAllCentralsAsList();
Centrals.Insert(0, new Central(){Central_ID = 999, Central_Name = "Select All"});
CentralChecks.DataSource = Centrals;
CentralChecks.DataTextField = "Central_Name";
CentralChecks.DataValueField = "Central_ID";
CentralChecks.DataBind();

And here is the markup:

<div class="CentralDiv" id="CentralDiv">
    <h2>Centrals:</h2>
    <span>
        <asp:TextBox ID="CentralTextBox" runat="server" CssClass="textbox">Centrals</asp:TextBox>
        <img id="CentralArrow" src="images/down_arrow.jpg" style="margin-left: -22px; margin-bottom: -5px" />
    </span>
    <div id="CentralEffect" class="ui-widget-content">
        <asp:CheckBoxList ID="CentralChecks" runat="server" onclick="GetSelectedCentralValue();">
        </asp:CheckBoxList>
    </div>
</div>

Note that there are multiple checkbox lists on the page, so any solution must keep this in mind.

score 12 · Accepted Answer · answered Mar 22 '11 at 20:20

12

Something like you could use for any of your checkbox lists, just add a cssclass of myCheckBoxList to each CheckBoxList control:

$('.myCheckBoxList :checkbox').eq(0).click(function() { 
    var toggle = this.checked;
    $('.myCheckBoxList :checkbox').attr("checked", toggle);
});

answered Mar 22 '11 at 20:20

MikeM

27,227
4
64
80

This is perfect - elegant and adaptable. +1 and marked as answer. Thank you. – splatto Mar 22 '11 at 21:53
I agree. Very simple to implement. Just need to insert the script after the checkboxlist is rendered. – Guilherme de Jesus Santos Aug 23 '11 at 15:36
– pvaju896 Dec 28 '11 at 04:37
– pvaju896 Dec 28 '11 at 04:38
@pvaju896 please create a new question, you can then reference this question – MikeM Dec 28 '11 at 05:31
@mdmullinax: +1 Brilliant. The only flaw is: *you can only have one of these controls on a page at a time as they will interfere with each other*. – iCollect.it Ltd Jul 06 '12 at 13:41

score 1 · Answer 2 · answered Mar 22 '11 at 20:16

1

You can iterate through all ListItems on click of Select All. And maintain a state flag to maintain whether all checkboxes are checked or not

if(boolAllChecked) {
    foreach (ListItem listItem in CentralChecks.Items)
    {
         listItem .Selected = false;
    }
}
else {
    foreach (ListItem listItem in CentralChecks.Items)
    {
         listItem .Selected = true;
    }
}

answered Mar 22 '11 at 20:16

ukhardy

2,084
1
13
12

Thank you, although this isn't a jquery solution – splatto Mar 22 '11 at 21:20

score 0 · Answer 3 · answered Jul 06 '12 at 13:38

Extending mdmullinax's brilliant answer, I came up with this generic solution for "select all" behavior that also unticks the "select all" (i.e. first) option if any other option is unticked and reticks the "select all" when all other items are ticked.

It also executes on window load as I inject it from ASP.Net server-side controls (which inject script in the head section of the page). Better to be safe than sorry :)

    $(window).load(function () {
        var cbs = $('.myCheckBoxList :checkbox');
        cbs.eq(0).click(function () {
            var toggle = this.checked;
            cbs.attr('checked', toggle);
        });
        cbs.slice(1).click(function () {
            if (!this.checked) {
                cbs.eq(0).attr('checked', false);
            } else {
                cbs.eq(0).attr('checked', cbs.slice(1).filter(':not(:checked)').length == 0);
            }
        });
    });

score 0 · Answer 4 · answered May 20 '14 at 00:50

There is a generic way of having a select all item in asp CheckBoxList with using jquery. You can have as many as CheckBoxList controls on the form with the select all functionality. you only need to make sure

Your CheckBoxList has allowSelectAll Class
You added a ListItem to your checkbox list to allow users to select All with the value of All

chkBoxList.Items.Insert(0, new ListItem("All", "All"));

you Only need the following code

<script>
    $('.allowSelectAll :checkbox[value=All]').click(function () {
        var toggle = this.checked;
        $(this).closest('.allowSelectAll').find(":checkbox").attr("checked", toggle);
    });
</script>

In the following code spinet I have 4 Checkbox lists

<div >
<label>Experience 1</label>
<asp:CheckBoxList ID="chklstExp1" runat="server"  CssClass="allowSelectAll">
</asp:CheckBoxList>

<label>Experience 2</label>
<asp:CheckBoxList ID="chklstExp2" runat="server" CssClass="allowSelectAll">
</asp:CheckBoxList>

<label>Experience 3</label>
<asp:CheckBoxList ID="chklstExp3" runat="server" CssClass="allowSelectAll">
</asp:CheckBoxList>

<label>Location</label>
<asp:CheckBoxList ID="chklstLocation" runat="server" CssClass="allowSelectAll">
</asp:CheckBoxList>

<asp:Button runat="server" ID="btnShowReport" OnClick="btnShowReport_Click" Text="Show Report"/>
</div>

score 0 · Answer 5 · answered Mar 22 '11 at 20:15

0

here is an example: http://jsfiddle.net/VTgGA/

code:

$('input:checkbox').click(function(){
    var $this = $(this);

    if($this.attr('ref') != 'checkall'){
        $(".select-all").attr('checked',false);
    }
    else {
        //Select All
        var $checked = $this.is(':checked');
        $('input:checkbox').each(function(){
            $(this).attr('checked',$checked);
        })
        $(".select-all").attr('checked',$checked);
    }
})

this is what the html of the checkboxes:

<input type='checkbox' ref='checkall' class='select-all'/>
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />

answered Mar 22 '11 at 20:15

Naftali

144,921
39
244
303

How can I give only the first element in a CheckBoxList a particular ref or class value? – splatto Mar 22 '11 at 21:19
well u just need to make a seperate checkbox for ur select all item – Naftali Mar 22 '11 at 21:20
I see you have answered a lot of PHP questions. I'm not sure what your experience is with the CheckBoxList control in asp.net but as far as I'm aware, this cannot be done. Perhaps you can offer a code sample to help me out? – splatto Mar 22 '11 at 21:50

Select All Items in asp.net CheckBoxList

5 Answers5

Linked