Click a div to check / uncheck a checkbox

Question

I applied the following code to make table rows check/uncheck a child checkbox when clicked. Now I discovered that when clicking the checkbox itself inside the row it doesen

Answer 1

I have found that you can do this simply by wrapping the div in the label. It doesn't work if the content in the div is what you are trying to change though, but it will check the checkbox.

Answer 2

What about:

return false;

As it is the same as entering both:

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

I believe that is the go to - no?

Answer 3

Check the target of the caller is not a checkbox

$("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/

The code above checks that the sender of the event is not a checkbox.

Answer 4

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

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

EDIT

here's an example: http://jsfiddle.net/GSqNv/

Answer 5

Besides the given solutions, isn't it better to just set the checkbox to the oposite state? For example:

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