Question

have a table

<table>
  <tr class="c1"><td><input type="checkbox" name="tableRow[]"></td>......</tr>
  <tr class="c2"><td><input type="checkbox" name="tableRow[]"></td>......</tr>
  <tr class="c1"><td><input type="checkbox" name="tableRow[]"></td>......</tr>
...
</table>

and then the js is:

$('input:checkbox[name*=tableRow]').click(function(event) {

    var el = $(this);
    if (el.attr('checked')) {
        el.parents('tr').css("background-color", '#ffcccc');
    }
    else {
        el.parents('tr').css("background-color", 'inherit');
    }
    event.stopPropagation();
});

$('input:checkbox[name*=tableRow]').parents('tr').click(function() {
    var el = $(this).find('> td:eq(0) > :checkbox');
    el.click();
});​

checkbox checks and unchecks in both ways, but when i click “tr” it looks like event rans before check set.

need: in both ckecks then set css

Answer 1

Here is a working example:
jsFiddle

Note that you should use label tag with attribute ‘for’ in order to get a more W3C friendly code.

 $('input:checkbox[name*=tableRow]').click(function (event) {

            var el = $(this);
             test(el);    
     }); 

    $('input:checkbox[name*=tableRow]').parents('tr').click(function () {
        var el = $(this).find(':checkbox');
        el.attr('checked', !el.attr('checked'));
        test(el);
    });

function test(el){
       if (el.is(':checked')) {
                el.parents('tr').css("background-color", '#ffcccc');
            }
            else {
                el.parents('tr').css("background-color", 'inherit');
            }
            event.stopPropagation();

}