CODEWITHSUNDEEP
c#jqueryasp.netcheckboxlistselectall
splatto
splatto

Reputation: 3217

Select All Items in asp.net CheckBoxList

ASP.NET and C#.

I'd like to have a CheckboxList with a "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.

Upvotes: 3

Views: 20650

Answers (5)

Azadeh Khojandi
Azadeh Khojandi

Reputation: 4074

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

  1. Your CheckBoxList has allowSelectAll Class
  2. 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>

Upvotes: 0

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

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);
            }
        });
    });

Upvotes: 0

MikeM
MikeM

Reputation: 27405

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);
});

Upvotes: 12

ukhardy
ukhardy

Reputation: 2104

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

Upvotes: 1

Naftali
Naftali

Reputation: 146302

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

Upvotes: 0

Related Questions