Checkboxs: ticking me off!

Question

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

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 2

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")) {