Press div to check / uncheck

Question

I applied the following code so that the rows of the table check / uncheck the checkbox of the child when clicked. Now I found that when I click on the checkbox inside the line, it performs a check. Maybe it checks the click (standard function) and then jquery takes the click event and takes it off the screen? How can i fix this?

//check on div click
$("tr").live("click",function() {
    var checkbox = $(this).find("input[type='checkbox']");

    if( checkbox.attr("checked") == "" ){
        checkbox.attr("checked","true");
    } else {
        checkbox.attr("checked","");
    }
});

Answer 1

I suspect the click event is bubbling from checkbox to tr. Try adding this code:

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

EDIT

here is an example: http://jsfiddle.net/GSqNv/

Answer 2

Check Caller Target is not a flag

$("tr").live("click",function(event) {
    var target = $(event.target);
    if (target.is('input:checkbox')) return;

    var checkbox = $(this).find("input[type='checkbox']");

    if( checkbox.attr("checked") == "" ){
       checkbox.attr("checked","true");
    } else {
       checkbox.attr("checked","");
    }
});

DEMO http://jsfiddle.net/7Bze7/

, .

Answer 3

Besides these solutions, is it better to set the flag to oposite? For instance:

var _current_state = checkbox.attr("checked");
checkbox.attr("checked") = !_current_state;

Answer 4

What about:

return false;

Since this is the same as entering both:

e.preventDefault(); 
e.stopPropagation();

I think this is coming - no?

Answer 5

I found that you can do this by simply placing the div in the shortcut. This will not work if the content in the div is what you are trying to change but check the box.