Check/Uncheck all items in a CheckBoxList using ASP.NET and JavaScript

Matt Pavey

An easy way to check or uncheck every item in a CheckBoxList.

JavaScript

function CheckBoxListSelect(cbControl, state)
{
    var chkBoxList  = document.getElementById(cbControl);
    var chkBoxCount = chkBoxList.getElementsByTagName("input");

    for (var i = 0; i < chkBoxCount.length; i++)
    {
        chkBoxCount[i].checked = state;
    }

    return false;
}

ASP.NET CheckBoxList

<div>
    <a href="javascript:void(0)"
       onclick="javascript: CheckBoxListSelect('<%=chkStates.ClientID %>', true)">Select All</a>
    |
    <a href="javascript:void(0)"
       onclick="javascript: CheckBoxListSelect('<%=chkStates.ClientID %>', false)">Select None</a>
</div>

<div>
    <asp:CheckBoxList ID="chkStates" RepeatColumns="6" runat="server" />
</div>

The CheckBoxList renders as a table of input elements, so the function just grabs every input inside the container and sets its checked state. Passing the ClientID from the server side is what lets the JavaScript find the right control regardless of how ASP.NET mangles the ID.