title: Toggling checkboxlist item using Javascript
body: <p>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.</p>
  
  <pre><code>&lt;asp:CheckBoxList ID="chkApplyLimits" runat="server" RepeatColumns="2" ClientIDMode="Static" onclick="CheckBoxToggle"&gt;
     &lt;asp:ListItem Text="Yes" Value="1"&gt;&lt;/asp:ListItem&gt;
     &lt;asp:ListItem Text="No" Value="0"&gt;&lt;/asp:ListItem&gt;
  &lt;/asp:CheckBoxList&gt;
  </code></pre>
  
  <p>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.</p>
  
  <pre><code> function CheckBoxToggle(event) {
       if (event.srcElement.type == 'checkbox') {
           var childNodes = event.srcElement.parentNode.childNodes;
           for (var i = 0; i &lt; childNodes.length; i++) {
               childNodes[i].setAttribute("checked", false);
           }
           event.srcElement.checked = true;
       }
   }
  </code></pre>
  
  <p>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.</p>
  
  <p>Any help is appreciated.</p>