0

I have a table with checkboxes in the first column, and a "select all" checkbox in the header. When I check a checkbox, I need the row color to change. 

var $tbl = $('#tbl');
var $bodychk = $tbl.find('tbody input:checkbox');

$(function () {
    $bodychk.on('change', function () {
        $(this).closest('tr').toggleClass('hilite');
    });

    $tbl.find('thead input:checkbox').change(function () {
        var c = this.checked;
        $bodychk.prop('checked', c);        
    });
});
  1. If you select the individual boxes, the row changes color
  2. If you click the "select all" box, it'll toggle the other checkboxes.

But I can't get both working together. See here

These questions come close but don't fully answer what might be wrong...

Change class of tr if checkbox is selected

Jquery "select all" checkbox

Improve this question
1
  • ahh, i didnt notice your fiddle in the comments, haha yea, that is exactly how i implemented, except you used a function to toggle, nicely done. if you had other things you wanted your checkbox to do (other than adding a class or two), then id suggest using .trigger() but as the issue is only with adding/removing a class, your fiddle is much cleaner. cheers! Commented Jan 16, 2015 at 18:10

2 Answers 2

Reset to default
1

something like this? http://jsfiddle.net/hb6cx0tn/9/

var $tbl = $('#tbl');
var $bodychk = $tbl.find('tbody input:checkbox');

$(function () {
    $bodychk.on('change', function () {
        if($(this).is(':checked')) {
            $(this).closest('tr').addClass('hilite');
        }
        else {
            $(this).closest('tr').removeClass('hilite');
        }
    });

    $tbl.find('thead input:checkbox').change(function () {
        var c = this.checked;
        $bodychk.prop('checked', c);
        $bodychk.trigger('change'); 
    });
});

i chose not to use toggle because it doesnt ensure that the checkbox is checked in order for the item to be highlighted.

the line $bodychk.trigger('change'); causes the .change() event to trigger so that you're just not adding a class to the element, you're actually triggering the checking of the element.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

How can I use this on only the first checkbox in the row? I don't want it to toggle on the 3 other check boxes I have later in that row.
@BoltBait perhaps you can link me to your question so i can get a better understanding of what you want to do
I figured it out. I simply add the onchange function to the checkbox when rendering the table (instead of adding it later like your example).
0

Just add the same line you had in the single checkbox:

$bodychk.prop('checked', c).closest("tr").toggleClass('hilite');

FIDDLE

You're still locating the tbody > input:checkbox so you can still back out to the parent tr and toggle the class

Improve this answer

3 Comments

That works. Thanks! I ended up replacing the toggleClass as that was causing issues fiddle
@spikej: i think theres a bug with this solution. try clicking "column", then "item 1", then "column" again
@indubitablee thanks. I noticed that too, and replaced toggleClass. Your answer with the trigger is what I was after but couldn't figure out.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.