Databases
StackOverflow2013
Postsdbo
POjquery show/hide html content when using checkbox
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery show/hide html content when using checkbox
    text
    copied!<p>I am trying to show/hide html content using jquery ... here is the code:</p> <p>HTML:</p> <pre><code>&lt;table width="1077" border="0" cellspacing="4" cellpadding="4"&gt; &lt;tr&gt; &lt;td height="100%"&gt;&amp;nbsp;&lt;/td&gt; &lt;td id="headerText"&gt; &lt;h2&gt;enter details below&lt;/h2&gt; &lt;/td&gt; &lt;td width="17" rowspan="3" valign="top" id="headerText"&gt;&lt;/td&gt; &lt;td id="headerText"&gt; &lt;h2 id="section"&gt; test data&lt;/h2&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width="1" height="100%"&gt;&amp;nbsp;&lt;/td&gt; &lt;td width="531" id="bodyText"&gt;more information&lt;/td&gt; &lt;td width="476" id="bodyText"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="150"&gt;&amp;nbsp;&lt;/td&gt; &lt;td valign="top"&gt; &lt;table width="100%" border="0" cellspacing="1" cellpadding="1"&gt; &lt;tr&gt; &lt;td width="7%" id="bodyText2"&gt; &lt;label for="zip2"&gt; &lt;input type="checkbox" name="check_medical2" id="check_medical2"&gt; &lt;/label&gt; &lt;/td&gt; &lt;td width="93%"&gt; &lt;label for="textfield3"&gt;&lt;/label&gt; &lt;label for="people3" id="bodyText"&gt;section 1&lt;/label&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="10" colspan="2" id="bodyText2"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td id="bodyText2"&gt; &lt;input type="checkbox" name="check_dental2" id="check_dental2"&gt; &lt;/td&gt; &lt;td id="bodyText"&gt;section 2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="10" colspan="2" id="bodyText5"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td id="bodyText2"&gt; &lt;input name="check_life_insurance2" type="checkbox" id="check_life_insurance2"&gt; &lt;/td&gt; &lt;td id="bodyText"&gt;section 3&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table width="100%" border="0" cellspacing="2" cellpadding="2"&gt; &lt;tr&gt; &lt;td width="30%"&gt;&lt;/td&gt; &lt;td width="43%"&gt;&amp;nbsp;&lt;/td&gt; &lt;td width="27%"&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;/td&gt; &lt;td valign="top"&gt; &lt;br&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;s:submit value="submit" name="submit" /&gt; </code></pre> <p>jQuery:</p> <pre><code>$('#check_life_insurance2').on("click", function () { if ($('#check_life_insurance2').prop("checked")) { $('#section').show(); } else { $('#section').hide(); } }); </code></pre> <p><a href="http://jsfiddle.net/hVWYg/" rel="nofollow">JS Fiddle</a>.</p> <p>can someone please tell me where I am going wrong.</p> <p>when section 3 checkbox is checked .. test data should be displayed. but it is failing for some reason. </p> <p>thanks for your help</p>
 

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