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
– filipko, Commented May 8, 2013 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
– satya, Commented May 8, 2013 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
– filipko, Commented May 9, 2013 at 4:09

filipko · Accepted Answer · 2013-05-10 21:39:39Z

2

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

edited May 10, 2013 at 21:39

answered May 9, 2013 at 4:12

filipko

9655 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

satya Over a year ago

Thanks for your response. But, still not able to toggle between the checkboxes.

filipko Over a year ago

After a little debugging I found the problem. During a translation from ASP controls to HTML, every checkbox tag is put into <td> tag. Therefore no action with the other checkboxes is done. Do you need to define this collection of checkboxes as ASP controls?

filipko Over a year ago

Check the updated version of my answer. This will work for you :)

satya Over a year ago

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?

filipko Over a year ago

I'm glad to help you. For more generic solution look at this question: stackoverflow.com/questions/5301643/… .

|

Darvi Sunny · Accepted Answer · 2013-10-29 07:56:29Z

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;

                    });
                });
            });
        }

Collectives™ on Stack Overflow

Toggling checkboxlist item using Javascript

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related