Checkboxs: ticking me off!

Question

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

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.

However (the plot thickens), if another checkbox is checked in the form, the trigger checkbox can be checked and the extra options appear, but if unchecked the extra option won't dissapear!

(Sorry that was long winded, 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 have tried different ways of checking if the trigger is checked or not, but any suggestions are welcome.

Edit HTML as requested: (although simplified as my ASP.Net repeater control 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 it helps!

Update: substituting the if condition to

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

doesn't trigger anything, no appearing or disappearing acts in sight. Thanks for the suggestion tho, maybe with my html you can discern why?

Update 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!

I have used this code in the end:

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

Thank you to adamantium as this solved the prod perfectly!

Problem Solved!

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

Answer 1

It might have something to do with this line:

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

AFAIK, that won't do anything useful. You probably want this:

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

Answer 2

What about replacing

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

with

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

is

Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression.

Edit: Replace

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

with

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

and

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

with

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

and your code works fine.

Working Demo

Answer 3

ob.change(

A checkbox's onchange doesn't fire in IE until it's unfocused. For this reason it's usual to use onclick instead.

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

Doesn't work for two reasons. Firstly, you've included $(this) as part of the string. A dollar and brackets don't mean anything to selectors so jQuery won't match anything. You've already got the this object you want; you don't need to select anything more. Secondly, val() on a checkbox gets the value of that checkbox, not whether it is checked or not. This is the value attribute, or on if you haven't specified one.

Whilst you could test for checkedness using if ($(this).is(':checked')), it's more readable and much quicker to just use the standard DOM checked property. You don't have to shoehorn everything you do into jQuery.

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