Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>To make your javascript code work, define your checkbox collection in HTML instead of ASP controls:</p> <pre><code>&lt;div id="CheckboxList" onclick="CheckBoxToggle()"&gt; &lt;input type="checkbox" value="0" name="checkbox1" /&gt;&lt;label for="checkbox1"&gt;A&lt;/label&gt; &lt;input type="checkbox" value="1" name="checkbox2" /&gt;&lt;label for="checkbox2"&gt;B&lt;/label&gt; &lt;input type="checkbox" value="2" name="checkbox3" /&gt;&lt;label for="checkbox3"&gt;C&lt;/label&gt; &lt;input type="checkbox" value="3" name="checkbox4" /&gt;&lt;label for="checkbox4"&gt;D&lt;/label&gt; &lt;/div&gt; </code></pre> <p>Then you can go with this javascript function:</p> <pre><code>function CheckBoxToggle() { var target = event.target || event.srcElement; if (target.type == 'checkbox') { var ch = target.parentNode.childNodes; for (var i = 0; i &lt; ch.length; i++) { ch[i].checked = false; } target.checked = true; } } </code></pre> <p>Alternatively, you can use ASP controls but during translation from ASP to HTML this:</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:ListItem Text="No" Value="0"&gt;&lt;/asp:ListItem&gt; &lt;asp:ListItem Text="No" Value="0"&gt;&lt;/asp:ListItem&gt; &lt;/asp:CheckBoxList&gt; </code></pre> <p>is translated into this:</p> <pre><code>&lt;table id="chkApplyLimits" onclick="CheckBoxToggle()"&gt; &lt;tr&gt; &lt;td&gt;&lt;input id="chkApplyLimits_0" type="checkbox" name="chkApplyLimits$chkApplyLimits_0" value="1" /&gt;&lt;label for="chkApplyLimits_0"&gt;Yes&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input id="chkApplyLimits_2" type="checkbox" name="chkApplyLimits$chkApplyLimits_2" value="0" /&gt;&lt;label for="chkApplyLimits_2"&gt;No&lt;/label&gt;&lt;/td&gt; &lt;/tr&gt;&lt;tr&gt; &lt;td&gt;&lt;input id="chkApplyLimits_1" type="checkbox" name="chkApplyLimits$chkApplyLimits_1" value="0" /&gt;&lt;label for="chkApplyLimits_1"&gt;No&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input id="chkApplyLimits_3" type="checkbox" name="chkApplyLimits$chkApplyLimits_3" value="0" /&gt;&lt;label for="chkApplyLimits_3"&gt;No&lt;/label&gt;&lt;/td&gt; &lt;/tr&gt;&lt;tr&gt; &lt;/table&gt; </code></pre> <p>so your javascript function needs to be changed into:</p> <pre><code>function CheckBoxToggle() { var target = event.target || event.srcElement; if (target.type == 'checkbox') { var table = target.parentNode.parentNode.parentNode.childNodes; for (var i = 0; i &lt; table.length; i++) { var tr = table[i].childNodes; for (var j = 0; j &lt; tr.length; j++) { if (tr[j].tagName == 'TD') tr[j].childNodes[0].checked = false; } } target.checked = true; } } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload