Bind JavaScript jQuery click event on label AND on checkbox simultaneously

Question

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.

David Thomas · Accepted Answer · 2012-02-08 15:37:21Z

14

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().

answered Feb 8, 2012 at 15:37

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Willy Over a year ago

Thanks for the complete answer !

Andrew Whitaker · Accepted Answer · 2012-02-08 15:36:54Z

3

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

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

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

answered Feb 8, 2012 at 15:36

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Collectives™ on Stack Overflow

Bind JavaScript jQuery click event on label AND on checkbox simultaneously

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related