Question

I have a table of data and have one checkbox per row for the user to select the item.

I’m using the following jQuery code to allow the user to select the item by clicking anywhere in the row:

$("tbody tr").click(function() {
    var checkbox = $(this).find(':checkbox');
    checkbox.attr('checked', !checkbox.attr('checked'));
});

The problem is if I click directly on the checkbox, nothing happens. ie. if the checkbox is not checked, it remains unchecked. If I click anywhere else in the row, the checkbox changes status.

I’m thinking that the jQuery code is causing the action to be performed twice. If I click on the checkbox, the checkbox will change but then the jQuery code for clicking on the row will be performed and the checkbox will be changed back. Not sure if that is actually happening but that is my guess.

How can I get a checkbox to be toggled when a user clicks on a row and the same thing if they click directly on the checkbox?

Answer 1

Check what item is being clicked by checking the event information. Then if it’s a checkbox, don’t run the code. Otherwise, toggle the checked attribute

$("tbody tr").click(function(e) {
        e = e || event;
        var isCheckbox = $(e.target).is(":checkbox");
        if (!isCheckbox) {
            var checkbox = $(this).find(':checkbox');
            checkbox.attr('checked', !checkbox.attr('checked'));
        }
});