CODEWITHSUNDEEP
javascriptjqueryhtmlcheckboxlabel
Willy
Willy

Reputation: 763

Bind JavaScript jQuery click event on label AND on checkbox simultaneously

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.

Upvotes: 13

Views: 13542

Answers (2)

David Thomas
David Thomas

Reputation: 253318

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:

Upvotes: 14

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

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

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

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

Upvotes: 3

Related Questions