Checkbox functionality not working when parent has a click event

Question

I have a checkbox inside a div which has a click event attached to it. But the checking and unchecking the checkbox directly doesn't work.

<div class="container" onclick="select(this)">
     <input type="checkbox" value="" /><label>Item</label>
</div>

function select(e) {
    var elm = $(e);
    var chkBox = elm.find('input');
    console.log(chkBox.is(':checked'));
    if(chkBox.is(':checked')) {
       chkBox.prop("checked", false);
   }else{
       chkBox.prop("checked", true);
   }
}

Demo : http://jsfiddle.net/h45A5/

Rajaprabhu Aravindasamy · Accepted Answer · 2014-08-06 04:22:40Z

2

Try to bind event properly rather than using an inline handler,

HTML:

<div class="container">
    <input type="checkbox" value="" /><label>Item</label>
</div>

JS:

$('div.container').click(function(e){
   if($(e.target).is(':checkbox')){ return; }
   var chkBox = $(this).find(':checkbox');
   chkBox.prop("checked", !chkBox.is(':checked'));
});

DEMO

answered Aug 6, 2014 at 4:22

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

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

Comments

Andreas · Accepted Answer · 2014-08-06 04:19:36Z

2

You should write var elm = getElementById('e'); instead of var elm = $(e);

Try it yourself: http://jsfiddle.net/h45A5/3/

edited Aug 6, 2014 at 4:19

Andreas

5,64710 gold badges48 silver badges57 bronze badges

answered Aug 6, 2014 at 4:09

user3894236

1142 silver badges15 bronze badges

1 Comment

user1184100 Over a year ago

i want the checkbox to be checked even when the container is selected and also when the checkbox is checked.

user3559349 · Accepted Answer · 2014-08-06 04:26:28Z

1

If I understand correctly, you want the checkbox to toggle if either the div and the checkbox are clicked, in which case, add

$('input[type="checkbox"]').click(function(e){
  e.stopPropagation();
});

Refer updated fiddle

answered Aug 6, 2014 at 4:26

user3559349

Collectives™ on Stack Overflow

Checkbox functionality not working when parent has a click event

3 Answers 3

DEMO

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related