Take the 2-minute tour ×

I'm trying to target various blocks that have the class "checkbox" and they all contain a label and an input of checkbox type. When clicking anywhere inside .checkbox area (except over the input) the "checked" value is being toggled, when clicking over the input, the value just stays the same. Could someone explain to me why is it acting like that (why when clicking the input, the value doesn't toggle)?


<div class="checkbox">
    <label for="a">a</label>
    <input type="checkbox" name="a" checked>
<div class="checkbox">
    <label for="b">b</label>
    <input type="checkbox" name="b">


function toggleProp(el) {
    $(el).prop("checked", !el.prop("checked"));

$(".checkbox").click(function () {

Live example


  • What it should have done:

    Clicking anywhere inside of the .checkbox areas, the value of input's checked property should have been toggled from true to false or vice versa.

  • What it does:

    Clicking anywhere inside of .checkarea areas except (!) the input toggles the value. When clicking the input, the value stays the same which is not wanted

share|improve this question
have you wrapped your code inside document.ready.? –  Dipesh Parmar Mar 11 '13 at 5:31
@DipeshParmar yes –  Adonis K. Mar 11 '13 at 5:32
@AdonisK. see my answer. –  Dipesh Parmar Mar 11 '13 at 5:36
@DipeshParmar stackoverflow.com/questions/4643990/… for every chunk of code you don't need document.ready . –  Ravi Gadag Mar 11 '13 at 6:11

1 Answer 1

up vote 0 down vote accepted

Found it.

I had to also add this part:

$(".checkbox input").click(function(e) {

This way, when clicking the input, it won't trigger its parent's click event

share|improve this answer

Your Answer


