Checkbox manipulation

Question

For some reason this little code is preventing the user from being able to check the actual checkbox and having it put the checkmark inside of it and the only way to get it checked is to click the row.

$('table tr').click(function() {

    checkBox = $(this).children('td').children('input[type=checkbox]');

    if(checkBox.attr('checked'))
        checkBox.removeAttr('checked');
    else
        checkBox.attr('checked', 'checked');

});

Answer 1

The reason you are disabling the default checkbox behavior of the input is that the checkbox is inside the tr, so when you check the checkbox you fire your Javascript AND you toggle the checkbox... leading to nothing happening. You must check that the target of your event is not a :checkbox.

Also, there's no need to worry about the attribute of the checkbox... with jQuery, you can simply .click() it!

$('table tr').click(function(event) {      

    if (! $(event.target).is("input:checkbox"))
        $(this).find('input:checkbox').click();        
});

Working example