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.

Side note: use [`.prop()`](http://api.jquery.com/prop/) rather than `.attr()`. — Dom, Mar 01 '13 at 20:05
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, Mar 01 '13 at 20:06
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, Mar 01 '13 at 20:04
take a look at How do I check a checkbox with jQuery or JavaScript? which says to use .prop() to jQuery 1.6+ and use .attr() to jQuery 1.5 and below — korogui, Mar 01 '13 at 20:20

Roko C. Buljan · Answer 1 · 2013-03-01T20:57:41.193

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 01 '13 at 20:57

answered Mar 01 '13 at 20:00

Roko C. Buljan

180,066
36
283
292

Not if there's a bunch of other stuff in `OuterDiv` – Madbreaks Mar 01 '13 at 20:01
Sorry I disagree. Are you sure your solution works w/o looking at op's CSS? – Madbreaks Mar 01 '13 at 20:03
What I mean: http://jsbin.com/owewey/7/edit -- you're making an assumption that op *wants* a label. – Madbreaks Mar 01 '13 at 20:09
1

@Madbreaks, You are making an assumption that op doesnt want a label :) +1 to compensate. – Jashwant Mar 01 '13 at 20:12
I posted the [similar](http://jsfiddle.net/q72dG/) solution in comment to @wirey's answer – Jashwant Mar 01 '13 at 20:38

score 1 · Accepted Answer · answered Mar 01 '13 at 20:05

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 01 '13 at 20:05

wirey00

33,149
7
51
64

Right. Cant this can be merged into the existing click by `e.target` ? – Jashwant Mar 01 '13 at 20:07
@Jashwant I wouldn't know how that would work.. Can you make a fiddle with that technique? – wirey00 Mar 01 '13 at 20:15

score 0 · Answer 3 · answered Mar 01 '13 at 20:10

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 01 '13 at 20:10

Dhawal

47
3

I guess, you dont see any answer / comment before posting your answer. – Jashwant Mar 01 '13 at 20:11

jquery set div to toggle checkbox breaks clicking the checkbox itself

3 Answers3