Databases
StackOverflow2013
Postsdbo
POCheckboxs: ticking me off!
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCheckboxs: ticking me off!
    text
    copied!<p>this is a small, <strong>but very annoying</strong>, glitch in my form.</p> <p>I have a checkbox, that if clicked displays others checkboxes and input fields for the user to add more information. If this trigger checkbox is unclicked, the extra options dissapear.</p> <p>However (the plot thickens), if another checkbox is checked in the form, the trigger checkbox can be checked and the extra options appear, <strong>but if unchecked the extra option won't dissapear!</strong></p> <p>(Sorry that was long winded, but i wanted to be clear!)</p> <p>Here is my simple Jquery code:</p> <pre><code>$(function() { var boxes = $('.obstruct-opt'); boxes.hide(); var ob = $('li.obstructionOptions').children().eq(0); ob.change(function() { if ($('$(this):checked').val()) { boxes.show(); } else { boxes.hide(); } }); }); </code></pre> <p>I have tried different ways of checking if the trigger is checked or not, but any suggestions are welcome.</p> <p><strong>Edit</strong> HTML as requested: (although simplified as my ASP.Net repeater control generated it)</p> <pre><code>&lt;ul&gt; &lt;li class="obstructionOptions"&gt; &lt;span&gt; &lt;input id="Obstruction" type="checkbox" name="Obstruction" /&gt; &lt;label for="Obstruction"&gt;Obstruction&lt;/label&gt; &lt;/span&gt; &lt;span class="obstruct-opt"&gt; &lt;input id="WeatherProof" type="checkbox" name="WeatherProof"/&gt; &lt;label for="WeatherProof"&gt;WeatherProof&lt;/label&gt; &lt;/span&gt; &lt;span class="obstruct-opt"&gt; &lt;input id="WeatherProofFlap" type="checkbox" name="WeatherProofFlap"/&gt; &lt;/span&gt; &lt;/li&gt; &lt;li class="obstruct-opt"&gt; &lt;span&gt;Obstruction Notes&lt;/span&gt; &lt;textarea name="ObstructionNotes" rows="7" cols="50" id="ObstructionNotes"/&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Hope it helps!</p> <p><strong>Update:</strong> substituting the if condition to</p> <pre><code>if ($(this).is(":checked")) { </code></pre> <p>doesn't trigger anything, no appearing or disappearing acts in sight. Thanks for the suggestion tho, maybe with my html you can discern why?</p> <p><strong>Update</strong> Ok after posting my HTML i realised ASP.Net has been stitching me up! As you can see i select the 'ob' object as the first child, but the first child is a generated span! ASP has been wrapping my checkboxes in spans all this time and i never suspected! shrewd!</p> <p>I have used this code in the end: </p> <pre><code> $('ul li.obstructionOptions span').children().eq(0).click(function() { if ($(this).is(":checked")) { boxes.show(); } else { boxes.hide(); } }); </code></pre> <p>Thank you to adamantium as this solved the prod perfectly!</p> <p><strong>Problem Solved!</strong></p> <p>Do not to trust ASP.Net with my markup!!!</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