Toggling checkboxlist item using Javascript

Question

I have a checkboxlist with two items. I am having a hard time toggling between the two checkboxlist items using JavaScript. I would like to click on one and if the other is already checked, the check mark should go away. Following is the markup for the checkboxlist.

<asp:CheckBoxList ID="chkApplyLimits" runat="server" RepeatColumns="2" ClientIDMode="Static" onclick="CheckBoxToggle">
   <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
   <asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:CheckBoxList>

I am using the following JavaScript function to enable the toggle. In the JavaScript, I am essentially getting all the child elements of the parent and then looping through them to set the checked property false for all of the child elements. Finally, I am making the checked property of the item clicked to true.

 function CheckBoxToggle(event) {
     if (event.srcElement.type == 'checkbox') {
         var childNodes = event.srcElement.parentNode.childNodes;
         for (var i = 0; i < childNodes.length; i++) {
             childNodes[i].setAttribute("checked", false);
         }
         event.srcElement.checked = true;
     }
 }

This works fine if nothing is checked at the beginning. However, when I click the second time both checkboxes become checked. Can someone please instruct how i can change this so that if one checkbox is already clicked, it will become unchecked when i click the second checkbox.

Any help is appreciated.

What if you changed `childNodes[i].setAttribute("checked", false)` to `childNodes[i].checked = false` ? — filipko, May 08 '13 at 22:35
The result is same. Works fine the first time, fails the second time. I think the entire for loop is not doing anything whether you use childNodes[i].setAttribute("checked", false) or childNodes[i].checked = false. — satya, May 08 '13 at 22:46
I think so either. But can't figure out what the problem could be. I would try to rename the variable childNodes because of possible collision with the keyword. But it probably won't solve the problem. — filipko, May 09 '13 at 04:09

filipko · Accepted Answer · 2013-05-10T21:39:39.237

To make your javascript code work, define your checkbox collection in HTML instead of ASP controls:

<div id="CheckboxList" onclick="CheckBoxToggle()">
    <input type="checkbox" value="0" name="checkbox1" /><label for="checkbox1">A</label>
    <input type="checkbox" value="1" name="checkbox2" /><label for="checkbox2">B</label>
    <input type="checkbox" value="2" name="checkbox3" /><label for="checkbox3">C</label>
    <input type="checkbox" value="3" name="checkbox4" /><label for="checkbox4">D</label>
</div>

Then you can go with this javascript function:

function CheckBoxToggle() {
    var target = event.target || event.srcElement;
    if (target.type == 'checkbox') {
        var ch = target.parentNode.childNodes;
        for (var i = 0; i < ch.length; i++) {
            ch[i].checked = false;
        }
        target.checked = true;
    }
}

Alternatively, you can use ASP controls but during translation from ASP to HTML this:

<asp:CheckBoxList ID="chkApplyLimits" runat="server" RepeatColumns="2" ClientIDMode="Static" onclick="CheckBoxToggle()">
   <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
   <asp:ListItem Text="No" Value="0"></asp:ListItem>
   <asp:ListItem Text="No" Value="0"></asp:ListItem>
   <asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:CheckBoxList>

is translated into this:

<table id="chkApplyLimits" onclick="CheckBoxToggle()">
<tr>
    <td><input id="chkApplyLimits_0" type="checkbox" name="chkApplyLimits$chkApplyLimits_0" value="1" /><label for="chkApplyLimits_0">Yes</label></td><td><input id="chkApplyLimits_2" type="checkbox" name="chkApplyLimits$chkApplyLimits_2" value="0" /><label for="chkApplyLimits_2">No</label></td>
</tr><tr>
    <td><input id="chkApplyLimits_1" type="checkbox" name="chkApplyLimits$chkApplyLimits_1" value="0" /><label for="chkApplyLimits_1">No</label></td><td><input id="chkApplyLimits_3" type="checkbox" name="chkApplyLimits$chkApplyLimits_3" value="0" /><label for="chkApplyLimits_3">No</label></td>
</tr><tr>
</table>

so your javascript function needs to be changed into:

function CheckBoxToggle() {
    var target = event.target || event.srcElement;
    if (target.type == 'checkbox') {
        var table = target.parentNode.parentNode.parentNode.childNodes;
        for (var i = 0; i < table.length; i++) {
            var tr = table[i].childNodes;
            for (var j = 0; j < tr.length; j++) {
                if (tr[j].tagName == 'TD')
                    tr[j].childNodes[0].checked = false;
            }
        }
        target.checked = true;
    }
}

Thanks for your response. But, still not able to toggle between the checkboxes. — satya, May 09 '13 at 15:36
After a little debugging I found the problem. During a translation from ASP controls to HTML, every checkbox tag is put into `` tag. Therefore no action with the other checkboxes is done. Do you need to define this collection of checkboxes as ASP controls? — filipko, May 09 '13 at 22:52
Check the updated version of my answer. This will work for you :) — filipko, May 09 '13 at 23:17
Thanks so much. You saved my life. You have no idea how many hours I have spent trying to fix this. One quick question. This javascript will only work in Internet Explorer as event.srcElement only works in IE. Any idea how this can be made more generic so that it works in all browsers? — satya, May 10 '13 at 14:49
I'm glad to help you. For more generic solution look at this question: http://stackoverflow.com/questions/5301643/how-can-i-make-event-srcelement-work-in-firefox-and-what-does-it-mean . — filipko, May 10 '13 at 21:37
Many thanks once again. You are the best. It works great in IE, Chrome and Opera, but fails in Firefox. Not sure what is so specific about Firefox. — satya, May 10 '13 at 22:30
You're welcome :) now you need to do a little more research with Firefox on your own! If my answer helped you, check it as a correct one :) — filipko, May 10 '13 at 23:32

score -1 · Answer 2 · answered Oct 29 '13 at 07:56

Please check this code, this will solve your problem.

<asp:CheckBoxList ID="chkApplyLimits" runat="server" RepeatColumns="2" onclick="SetCheckboxListSingle('chkApplyLimits')">
   <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
   <asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:CheckBoxList>

function SetCheckboxListSingle(cblId) {
            $('#' + cblId).find('input[type="checkbox"]').each(function () {
                $(this).bind('click', function () {
                    var clickedCbxId = $(this).attr('id');
                    $('#' + cblId).find('input[type="checkbox"]').each(function () {
                        if (clickedCbxId == $(this).attr('id'))
                            return true;

                        document.getElementById($(this).attr('id')).checked = false;

                    });
                });
            });
        }

Toggling checkboxlist item using Javascript

2 Answers2