Clicking on a label does not trigger a click event

Question

I have this code:

<label><input type="checkbox">True?</label> 

and

 $("label").click(function () { $(this).toggleClass("active"); }); 

When I click the checkbox class switch, when I click "Truth?" Nothing happened. What for?

Then, if I do not wrap the checkbox in the shortcut, everything works fine.

 <input type="checkbox" id="c1"><label for="c1">True?</label> 

This is so strange ... And it doesn’t matter if I put a “for” or not.

http://jsfiddle.net/zufs6ueh/1/

What's going on here?

Answer 1

This would be safer to use:

 $(function() { $('input[type="checkbox"]').bind('change', function (v) { if($(this).is(':checked')) { $(this).parent().addClass('active'); } else { $(this).parent().removeClass('active'); } }); }); 

Using change instead of click allows people to navigate forms using the keyboard.

Answer 2

Clicking on the label also causes a click on the input, so attach the change event to the checkbox:

 $(function(){ $("label input").on("click",function(){ $(this).parent().toggleClass("active"); }); }); 

 .active {color:red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label><input type="checkbox" />True?</label> 

Or using CSS 3

If you don't need to support older browsers, you can use the pseudo-class in :checked in CSS:

 input[type=checkbox]:checked + label {color:red;} 

 <input type="checkbox" id="demo" name="demo"> <label for="demo">True?</label> 

Answer 3

You are really close @Andrey, some interesting things about input HTML s;

• Both radio and checkbox HTML- type can trigger JavaScript using onclick

• Both radio and checkbox HTML type s has .checked properties that can be inspected by JavaScript and :checked pseudo class in CSS

• Using name s on radio HTML- type s allows you to group things

Here is an example of code that does things with checkbox ...

 /** * Example JavaScript function for HTML input radio or checkbox types to call * @returns {boolean} */ function checkCheckbox(checkbox) { if (checkbox.checked != true) return false; /* Do JavaSript things when checkbox is checked */ console.log('checkbox.checked -> ' + checkbox.checked); window.alert('checkbox.value -> ' + checkbox.value); return true; } 

 /** * Hide things that should not be seen by just anyone */ .menu__checkbox, .menu__container { display: none; visibility: hidden; opacity: 0; filter: alpha(opacity=0); /* Old MS compatibility */ } /** * Stylize the label some */ .menu__label { display: block; width: 20px; height: 100%; transform: rotate(90deg); } /** * Show some things when checkbox is checked * Note, if feeling adventurous try using a '~' instead of '+' */ .menu__checkbox:checked + .menu > .menu__container { display: block; visibility: visible; opacity: 1; filter: alpha(opacity=100); } /** * Oh and un-rotate label when checkbox is checked too */ .menu__checkbox:checked + .menu > .menu__label { transform: rotate(0deg); } 

 <input type="checkbox" class="menu__checkbox" value="valuable_checkbox" onclick="checkCheckbox(this);" id="trigger-menu"> <div class="menu"> <div class="menu__container"> <p class="menu__description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <label for="trigger-menu" class="menu__label"> &#x25B2; </label> </div> 

... if you look very closely, targeting via trigger-menu shared between the aforementioned label for and id input does some things with CSS and HTML, which many can resort to JavaScript ... although they still check the box outside the scope the menu was for demonstration only; simply because something can be done does not always mean, in other words.

As if I eluded the question, the code was very close ...

 <input type="checkbox" id="c1"><label for="c1">True?</label> 

... probably will work with ...

 <input id="c1" type="checkbox" onclick="window.alert('this.checked -> ' + this.checked);"> <label for="c1">Is checked?</label> 

And since I also hinted that radio input type d can be used in a similar way, below is a preview of something that might one day be made public as part of something funny ...

  <div class="menu__style"> <input type="radio" name="colorize" value="Default" onclick="color_picker.unsetAlternateStyleSheet()" class="menu__style__item" id="style-default"> <label for="style-default" class="menu__style__label">Default Style</label> <br> <input type="radio" name="colorize" value="AlternateStyleOne" onclick="color_picker.setAlternateStyleSheet(title = this.value)" class="menu__style__item" id="style-one"> <label for="style-one" class="menu__style__label">First Alternative Style</label> <br> <input type="radio" name="colorize" value="AlternateStyleTwo" onclick="color_picker.setAlternateStyleSheet(title = this.value)" class="menu__style__item" id="style-two"> <label for="style-two" class="menu__style__label">Second Alternative Style</label> </div>