Databases
StackOverflow2013
Postsdbo
POShow/Hide based on checkbox checked/unchecked
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POShow/Hide based on checkbox checked/unchecked
    text
    copied!<p>I have 5 checkboxes. 4 of them have to show/hide based on whether the 5th is checked/unchecked. I'm trying to do this using JQuery, however I'm not quite getting it right for some reason. I'm hitting the sections of code that check the checked/unchecked property correctly, just not getting the actual show/hide code correct. I have tried it using a CSS Class for the checkboxes I need to toggle. Here's the JQuery and .aspx code</p> <pre><code>$(function () { $('#&lt;%=chkFrench.ClientID %&gt;').unbind('click'); $('#&lt;%=chkFrench.ClientID %&gt;').click(function () { enable_cb(); $(".EnhancedFrench").click(enable_cb); }); }); function enable_cb() { if (this.checked) { alert("show"); $('.EnhancedFrench').show(); } else { alert("hide"); $('.EnhancedFrench').hide(); } } &lt;table&gt; &lt;tr&gt; &lt;td&gt;Display Live (Fr):&lt;/td&gt; &lt;td&gt;&lt;asp:CheckBox runat="server" ID="chkFrench" CssClass="EnhancedFrench" /&gt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;French1&lt;/td&gt; &lt;td&gt;&lt;asp:CheckBox runat="server" ID="CheckBox1" CssClass="EnhancedFrench" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;French2&lt;/td&gt; &lt;td&gt;&lt;asp:CheckBox runat="server" ID="CheckBox2" CssClass="EnhancedFrench" /&gt;&lt;/td&gt; &lt;tr&gt; &lt;tr&gt; &lt;td&gt;French3&lt;/td&gt; &lt;td&gt;&lt;asp:CheckBox runat="server" ID="CheckBox3" CssClass="EnhancedFrench" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;French4&lt;/td&gt; &lt;td&gt;&lt;asp:CheckBox runat="server" ID="CheckBox4" CssClass="EnhancedFrench" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </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