CheckBoxList Items using JavaScript

Question

I have a checkoxlist with a couple of items and an all option. The user can select all and I want this to check off all the options and if they uncheck all it will uncheck all options.

I have accomplished this with the following code.

<script language="javascript" type="text/javascript">
    function CheckBoxListSelect(cbControl) //, state)
    {
        var chkBoxList = document.getElementById(cbControl);
        var chkBoxCount= chkBoxList.getElementsByTagName("input");

        alert(chkBoxCount[0].checked);

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

        return false; 
    }
</script>

cblAffiliation.Attributes.Add("onclick", "javascript: CheckBoxListSelect ('" & cblAffiliation.ClientID & "');")

The issue is that if I select any of the boxes it loops through and then sets them to whatever the all option is. I am having trouble figuring out the best way to get around this.

I want to avoid using a checkbox next to the checkboxlist, then I have to make that line up with the checkboxlist.

The html is just the checkboxlist with it's items. This is an existing system and not sure that I could add jQuery to the mix. — VoltaicShock, Apr 28 '11 at 17:08
Could add jQuery using a CDN like Google at least to try it, it will be a great help — msmafra, Apr 28 '11 at 23:15

Bob Fincheimer · Accepted Answer · 2011-04-28T19:37:00.397

Simply check to see if the box clicked was the all option. If it was, then go ahead and change the rest of the boxes. If it isn't, then check all the options to see if they are all checked so you can update the 'All' checkbox.

EDIT

You might want to use onChange, instead of onClick, onClick will probably be called before the value on the given checkbox is changed.

Code not checked, please forgive syntax problems.

<script language="javascript" type="text/javascript">
    function CheckBoxListSelect(cbControl) //, state)
    {
        var chkBoxList = document.getElementById(cbControl);
        var chkBoxCount= chkBoxList.getElementsByTagName("input");
        var clicked = this;

        alert(chkBoxCount[0].checked ? 'All is Checked' : 'All is not Checked');
        alert(clicked == chkBoxCount[0] ? 'You Clicked All' : 'You Didn't click All');

        var AllChecked = true; // Check the all box if all the options are now checked

        for(var i = 1;i < chkBoxCount.length; i++)
        {   
            if(clicked == chkBoxCount[0]) { // Was the 'All' checkbox clicked?
                chkBoxCount[i].checked = chkBoxCount[0].checked; // Set if so
            }
            AllChecked &= chkBoxCount[i].checked; // AllChecked is anded with the current box
        }

        chkBoxCount[0].checked = AllChecked;

        return false; 
    }
</script>

cblAffiliation.Attributes.Add("onchange", "javascript: CheckBoxListSelect ('" & cblAffiliation.ClientID & "');")

score 2 · Answer 2 · edited Sep 14 '12 at 12:10

 <asp:CheckBox ID="checkAll" runat="server" Text="Select/Unselect" onclick="CheckAll();" />
    <asp:CheckBoxList ID="chkTest" runat="server" onclick="ClearAll();">
        <asp:ListItem Text="Test 1" Value="0"></asp:ListItem>
        <asp:ListItem Text="Test 2" Value="1"></asp:ListItem>
        <asp:ListItem Text="Test 3" Value="2"></asp:ListItem>
            </asp:CheckBoxList>
<script type="text/javascript">

function CheckAll() {
    var intIndex = 0;
    var rowCount=document.getElementById('chkTest').getElementsByTagName("input").length;
    for (intIndex = 0; intIndex < rowCount; intIndex++) 
    {
        if (document.getElementById('checkAll').checked == true)
        {
            if (document.getElementById("chkTest" + "_" + intIndex)) 
            {
                if (document.getElementById("chkTest" + "_" + intIndex).disabled != true)
                    document.getElementById("chkTest" + "_" + intIndex).checked = true;
            }
         }
         else
         {
             if (document.getElementById("chkTest" + "_" + intIndex)) 
                {
                    if (document.getElementById("chkTest" + "_" + intIndex).disabled != true)
                        document.getElementById("chkTest" + "_" + intIndex).checked = false;
                }
         }
    }
 } 

function ClearAll(){
    var intIndex = 0;
    var flag = 0;
    var rowCount=document.getElementById('chkTest').getElementsByTagName("input").length;
    for (intIndex = 0; intIndex < rowCount; intIndex++) 
    {
            if (document.getElementById("chkTest" + "_" + intIndex)) 
            {
                    if(document.getElementById("chkTest" + "_" + intIndex).checked == true)
                    {
                        flag=1;
                    }
                    else
                    {
                        flag=0;
                        break;
                    }
            }
    }
    if(flag==0)
         document.getElementById('checkAll').checked = false;
    else
         document.getElementById('checkAll').checked = true;

}
</script>

Please copy and paste that whole code u will get answer.means... all colored code and below is javascript function is coming copy all. — Ruchi Jain, Sep 14 '12 at 12:11

score 2 · Answer 3 · answered Dec 14 '11 at 08:55

I think this code will help you.

<script type="text/javascript">
function check(checkbox) 
{
 var cbl = document.getElementById('<%=CheckBoxList2.ClientID %>').getElementsByTagName("input");
 for(i = 0; i < cbl.length;i++) cbl[i].checked = checkbox.checked;
}
</script>

 <asp:CheckBox ID="CheckBox1" runat="server" onclick="check(this)" />
 <asp:CheckBoxList ID="CheckBoxList2" runat="server">
    <asp:ListItem>C1</asp:ListItem>
    <asp:ListItem>C2</asp:ListItem>
  </asp:CheckBoxList>

score 0 · Answer 4 · answered Mar 03 '14 at 08:46

 function checkparent(id) {
            var parentid = id;
            var Control = document.getElementById(parentid).getElementsByTagName("input");
            if (parentid.indexOf("List") != -1) {
                parentid = parentid.replace("List", "");
            }
            if (eval(Control).length > 0) {
                if (eval(Control)) {

                    for (var i = 0; i < Control.length; i++) {
                        checkParent = false;
                        if (Control[i].checked == true) {
                            checkChild = true;
                        }
                        else {

                            checkChild = false;
                            break;
                        }
                    }
                }
            }
            if (checkParent == true && document.getElementById(parentid).checked == false) {
                document.getElementById(parentid).checked = false;
                checkParent = true;
            }
            else if (checkParent == true && document.getElementById(parentid).checked == true) {
                document.getElementById(parentid).checked = true;
                checkParent = true;
            }
            if (checkChild == true && checkParent == false) {
                document.getElementById(parentid).checked = true;
                checkParent = true;
            }
            else if (checkChild == false && checkParent == false) {
                document.getElementById(parentid).checked = false;
                checkParent = true;
            }

        }
        function CheckDynamic(chkid) {
            id = chkid.id;
            var chk = $("#" + id + ":checked").length;
            var child = id + "List";
            if (chk != 0) {
                $("[id*=" + child + "] input").attr("checked", "checked");
            }
            else {
                $("[id*=" + child + "] input").removeAttr("checked");
            }
            checkparent(id);
        }

This is Dynamic funtion which can be used for All checkbox and checkbox list.To use the above code Append checkboxlist id with List ex:(parent id+List) declare the variables which i have used. — Gurindapalli, Mar 03 '14 at 08:49
Call the above function in checkbox click and checkboxlist click event (CheckDynamic(this)) — Gurindapalli, Mar 03 '14 at 08:50
var id = ""; var child = ""; var checkChild = null; var checkParent = true; — Gurindapalli, Mar 03 '14 at 08:54

CheckBoxList Items using JavaScript

4 Answers4

EDIT