Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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