Geek Answers Handbook

Flags: halo me!

this is a small but very annoying glitch in my form.

I have a flag that, when clicked, shows other flags and input fields for the user to add additional information. If this trigger flag is disabled, additional options disappear.

However (the plot thickens), if a different flag is set in the form, the trigger flag can be checked and additional parameters will appear , but if it is not set, the additional parameter will not disappear!

(Sorry it was a long time ago, but I wanted to be clear!)

Here is my simple jQuery 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(); } }); });

I tried various ways of checking if the trigger is set or not, but any suggestions are welcome.

Edit HTML as requested: (although it is simplified since my ASP.Net relay generated it)

 <ul> <li class="obstructionOptions"> <span> <input id="Obstruction" type="checkbox" name="Obstruction" /> <label for="Obstruction">Obstruction</label> </span> <span class="obstruct-opt"> <input id="WeatherProof" type="checkbox" name="WeatherProof"/> <label for="WeatherProof">WeatherProof</label> </span> <span class="obstruct-opt"> <input id="WeatherProofFlap" type="checkbox" name="WeatherProofFlap"/> </span> </li> <li class="obstruct-opt"> <span>Obstruction Notes</span> <textarea name="ObstructionNotes" rows="7" cols="50" id="ObstructionNotes"/> </li> </ul>

Hope this helps!

Update: replacing the if condition with

 if ($(this).is(":checked")) {

It causes nothing, no visible or disappearing actions are visible. Thanks for the offer tho, maybe with my html you can understand why?

Update Well, after publishing my HTML, I realized that ASP.Net stitches me up! As you can see, I select the ob ob object as the first child, but the first child is a generated span! ASP has been wrapping my flags in runs all this time, and I never suspected! insightful!

I used this code at the end:

  $('ul li.obstructionOptions span').children().eq(0).click(function() { if ($(this).is(":checked")) { boxes.show(); } else { boxes.hide(); } });

Thanks adamantium, as it solved prod perfectly!

The problem is solved!

Do not trust ASP.Net with my markup !!!

+4
source share
3 answers

How about a replacement

 if ($('$(this):checked').val())

from

 if ($(this).is(':checked'))

is

Checks the current selection of the expression and returns true if at least one selection item matches the given expression.

Edit: Replace

 var ob = $('li.obstructionOptions').children().eq(0);

from

 var ob = $('ul li.obstructionOptions span').children().eq(0);

and

 <textarea name="ObstructionNotes" rows="7" cols="50" id="ObstructionNotes"/>

from

 <textarea name="ObstructionNotes" rows="7" cols="50" id="ObstructionNotes"></textarea>

and your code is working fine.

Working demo

+5
source

This may have something to do with this line:

 if ($('$(this):checked').val()) {

AFAIK, it won’t bring anything. You probably want this:

 if ($(this).is(":checked")) {
+2
source 
 ob.change(
The onchange flag onchange not work in IE until it is focused. For this reason, usually use onclick instead.
 $('$(this):checked').val()

It does not work for two reasons. First, you included $(this) as part of the string. Dollar and brackets mean nothing to selectors, so jQuery won't match anything. You already have the this object that you want; you no longer have to choose anything. Secondly, val() on the flag gets the value of this flag, but not it or not. This is the value or on attribute if you did not specify it.

While you can test validation using if ($(this).is(':checked')) , it is more readable and much faster to use the standard DOM checked property. You do not need to redo everything you do in jQuery.

 ob.click(function() { if (this.checked) boxes.show(); else boxes.hide(); });
+1
source

More articles:


All Articles