jquery set div to toggle checkbox breaks clicking the checkbox itself

Question

I have this check box:

<div class="OuterDiv">
   <div class="InnerDiv">
      <input type="checkbox" name="tie" value="tie">Error in tie score<br>
   </div>
</div>

I have this jquery to toggle the checkbox:

$(document).ready(function() {
   $('.OuterDiv').click(function() {
      if ($(this).find('input:checkbox').is(':checked')) { 
         $(this).find('input:checkbox').attr('checked',false);
      } else {
         $(this).find('input:checkbox').attr('checked',true);
      }
   });
});

This seems to work, to toggling the checkbox when clicking on the div. However when I click the checkbox itself, nothing happens and it does not toggle.

Your problem is that when you click on check box, check box itself toggles, then another toggle is done because of your code! — Mostafa Shahverdy
– Mostafa Shahverdy, Commented Mar 1, 2013 at 20:04
You should use label. Its there for a reason. Also, When you click the checkbox, it checks the checkbox (the default functionality), but the event is propagated to Outerdiv and thus your function toggles it and you see no change — Jashwant
– Jashwant, Commented Mar 1, 2013 at 20:06
take a look at <a href="stackoverflow.com/questions/426258/… do I check a checkbox with jQuery or JavaScript?</a> which says to use .prop() to jQuery 1.6+ and use .attr() to jQuery 1.5 and below — korogui
– korogui, Commented Mar 1, 2013 at 20:20

Roko C. Buljan · Accepted Answer · 2013-03-01 20:57:41Z

2

Without a <label> around the input (entire DIV is clickable) go for:

LIVE DEMO

$(document).ready(function() {

   $('.OuterDiv').click(function(e) {
     var $chkb = $(':checkbox', this)[0];
     if(e.target !== $chkb) $chkb.checked = !$chkb.checked; 
   });

});

(No JS:)
Else, if you just want the text next to the checkbox to be clickable:
LIVE DEMO

<div class="OuterDiv">
   <div class="InnerDiv">
     <label>
      <input type="checkbox" name="tie" value="tie">Error in tie score<br>
     </label>
   </div>
</div>

edited Mar 1, 2013 at 20:57

answered Mar 1, 2013 at 20:00

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

5 Comments

Madbreaks Over a year ago

Not if there's a bunch of other stuff in OuterDiv

Madbreaks Over a year ago

Sorry I disagree. Are you sure your solution works w/o looking at op's CSS?

Madbreaks Over a year ago

What I mean: jsbin.com/owewey/7/edit -- you're making an assumption that op wants a label.

Jashwant Over a year ago

@Madbreaks, You are making an assumption that op doesnt want a label :) +1 to compensate.

Jashwant Over a year ago

I posted the similar solution in comment to @wirey's answer

wirey00 · Accepted Answer · 2013-03-01 20:05:22Z

1

You need to stop the propagation of the event bubbling up from your checkbox using event.stopPropagation()

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

answered Mar 1, 2013 at 20:05

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

2 Comments

Jashwant Over a year ago

Right. Cant this can be merged into the existing click by e.target ?

wirey00 Over a year ago

@Jashwant I wouldn't know how that would work.. Can you make a fiddle with that technique?

Dhawal · Accepted Answer · 2013-03-01 20:10:19Z

0

You don't need to use jQuery for this. Just use label tag as below:

<div class="OuterDiv">
    <label>
        <input type="checkbox" name="tie" value="tie">Error in tie score
    </label>
</div>

answered Mar 1, 2013 at 20:10

Dhawal

473 bronze badges

1 Comment

Jashwant Over a year ago

I guess, you dont see any answer / comment before posting your answer.

Collectives™ on Stack Overflow

jquery set div to toggle checkbox breaks clicking the checkbox itself

3 Answers 3

5 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related