CODEWITHSUNDEEP
asp.netcheckboxlist
satya
satya

Reputation: 13

Toggling checkboxlist item using Javascript

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.

Upvotes: 1

Views: 10726

Answers (2)

Darvi Sunny
Darvi Sunny

Reputation: 137

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;

                    });
                });
            });
        }

Upvotes: -1

filipko
filipko

Reputation: 965

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

Upvotes: 2

Related Questions