Highlight row with jQuery on checkbox select

Question

I have a table with multiple rows. Each row has a check button. How do i highlight the row (apply style I suppose) when the checkbox is selected?

Please try to give it a shot first and then come back with some code. — CarlosZ
– CarlosZ, Commented Apr 1, 2011 at 17:10

karim79 · Accepted Answer · 2011-04-01 17:09:54Z

10

$(":checkbox").change(function() {
    $(this).closest("tr").toggleClass("highlight", this.checked);
});

See toggleClass() and closest()

answered Apr 1, 2011 at 17:09

karim79

343k67 gold badges420 silver badges409 bronze badges

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

3 Comments

Winfield Trail Over a year ago

Looks like they both add the class. Typo?

karim79 Over a year ago

@Kerin - it was. I revised my answer, made it more concise using .toggleClass.

Winfield Trail Over a year ago

Right on. Incidentally, you just taught me about .closest() - golly, me and jQuery are getting married someday.

Alan · Accepted Answer · 2011-04-01 17:11:19Z

0

$(":checkbox:checked").each( 
function() 
{ 
    if (this.checked) 
    {
        this.addclass("yourClass");
    }
}

answered Apr 1, 2011 at 17:11

Alan

6522 gold badges6 silver badges18 bronze badges

Comments

Ron Ziroby Romero · Accepted Answer · 2011-09-14 15:04:50Z

0

$(function(){
    $(":checkbox").click(function(){

       var thischeck = $(this);
       var approved = (thischeck.is(':checked')) ? '1' : '0';
       if(approved) {
           //apply what ever you want
       }
    });
})(jQuery);

I would try this, not sure if it is an elegant solution.

edited Sep 14, 2011 at 15:04

Ron Ziroby Romero

9,4888 gold badges46 silver badges67 bronze badges

answered Apr 1, 2011 at 17:13

omabena

3,5811 gold badge19 silver badges13 bronze badges

Collectives™ on Stack Overflow

Highlight row with jQuery on checkbox select

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related