asp.net - Toggling checkboxlist item using Javascript -

i have checkboxlist 2 items. having hard time toggling between 2 checkboxlist items using javascript. click on 1 , if other checked, check mark should go away. following markup 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 using following javascript function enable toggle. in javascript, getting child elements of parent , looping through them set checked property false of child elements. finally, making checked property of item clicked true.

 function checkboxtoggle(event) {      if (event.srcelement.type == 'checkbox') {          var childnodes = event.srcelement.parentnode.childnodes;          (var = 0; < childnodes.length; i++) {              childnodes[i].setattribute("checked", false);          }          event.srcelement.checked = true;      }  } 

this works fine if nothing checked @ beginning. however, when click second time both checkboxes become checked. can please instruct how can change if 1 checkbox clicked, become unchecked when click second checkbox.

any appreciated.

to make javascript code work, define 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 can go javascript function:

function checkboxtoggle() {     var target = event.target || event.srcelement;     if (target.type == 'checkbox') {         var ch = target.parentnode.childnodes;         (var = 0; < ch.length; i++) {             ch[i].checked = false;         }         target.checked = true;     } } 

alternatively, can use asp controls during translation asp 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 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 javascript function needs changed into:

function checkboxtoggle() {     var target = event.target || event.srcelement;     if (target.type == 'checkbox') {         var table = target.parentnode.parentnode.parentnode.childnodes;         (var = 0; < table.length; i++) {             var tr = table[i].childnodes;             (var j = 0; j < tr.length; j++) {                 if (tr[j].tagname == 'td')                     tr[j].childnodes[0].checked = false;             }         }         target.checked = true;     } }