Question

In this JSfiddle have I two forms.

This is duplicated twice

<form action="" method="post">
<input id="element" signed type="checkbox" checked>
<label for="element">x</label>
<button type="submit">Submit</button>
</form>

and the JQuery looks like this

$('form').live('submit', function(){
    if ($("input[type=checkbox]").is(':checked')){
        $("label").show();
    }else{
        $("label").hide();
    }        
    return false;
});

I can’t use ID’s to distinguished between the forms, so I am left this $(this) I suppose.

If the last form is removed, it works as it should, but the problem is to get it work with many without using ID’s.

However if I change the code to

$('form').live('submit', function(){
    if ($(this).("input[type=checkbox]").is(':checked')){
        $(this).("label").show();
    }else{
        $(this).("label").hide();
    }        
    return false;
});

It doesn’t work.

What am I doing wrong?

Answer 1

$(this).("input[type=checkbox]")

is not valid code–you’re using parens to invoke something, but have nothing in front of them to invoke. You need to call .find() or .children() off your jQuery-ized form:

$(this).find("input[type=checkbox]")

Here is a condensed version for you:

$( 'form' ).live( 'submit', function()
{
  var $this = $( this );

  $this.find( 'label' ).toggle( $this.find( 'input[type="checkbox"]' ).is( ':checked' ) );

  return false;
} );