I'm using labels for my form, like this :

<label for="foo" id="bar">Label</label>
<input type="checkbox" id="foo" />

I want to hide an element when the user uncheck the box, and show it otherwise.

The problem is, if I bind the click event to "foo", it'll only works when the user clicks on the checkbox itself and not on the label. Therefore, do I also need to bind a click event on the label ? Or should I enclose both elements within a span ? My HTML already contains 2344 elements, so I'd like to do it without adding anything, and without doubling the JavaScript code or the selector, if possible.

I'm using labels for my form, like this :

<label for="foo" id="bar">Label</label>
<input type="checkbox" id="foo" />

I want to hide an element when the user uncheck the box, and show it otherwise.

The problem is, if I bind the click event to "foo", it'll only works when the user clicks on the checkbox itself and not on the label. Therefore, do I also need to bind a click event on the label ? Or should I enclose both elements within a span ? My HTML already contains 2344 elements, so I'd like to do it without adding anything, and without doubling the JavaScript code or the selector, if possible.

• javascript
• jquery
• html
• checkbox
• label

2 Answers 2

Instead of binding with the click() event, you should bind using the change() event, then however this change is triggered the outcome will be the same:

$('#foo').change(
    function(){
        // do whatever
    });

References:

• change().

The change event should fire for the input whether the label or input is clicked:

$("#foo").change(function () { ... });

Example http://jsfiddle.net/andrewwhitaker/6LMXW/