jquery set div to toggle checkbox breaks clicking the checkbox itself -

i have check box:

<div class="outerdiv">    <div class="innerdiv">       <input type="checkbox" name="tie" value="tie">error in tie score<br>    </div> </div> 

i have jquery toggle 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 work, toggling checkbox when clicking on div. when click checkbox itself, nothing happens , not toggle.

you need stop propagation of event bubbling checkbox using event.stoppropagation()

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