Highlight table row with checkbox using jQuery

Question

I have the following HTML table. Each row contains a checkbox followed by some text.

<table>
    <tr>
        <td><input type="checkbox" /></td>
        <td>Name</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>Name2</td>
    </tr>
</table>

I need some help writing a script that will highlight (adding a class) the rows that have been checked and unchecking will remove that class.

gaurang171 · Accepted Answer · 2012-07-08 02:04:08Z

2

http://codebins.com/codes/home/4ldqpb8

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

answered Jul 8, 2012 at 2:04

gaurang171

9,1104 gold badges31 silver badges30 bronze badges

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

2 Comments

John Magnolia Over a year ago

Out of interest why use closest instead of parents?

gaurang171 Over a year ago

Because CLosest finds the first one and then stop searching for others while parents goes till top of the document and if you have nested trs it will process toggleClass on all of them. so closest is faster and efficient & less chances of error.

Mujah Maskey · Accepted Answer · 2012-07-08 01:57:45Z

2

$("#yourTableId input:checkbox").change(function() {
        var $this = $(this);
        if ($this.is(":checked")) {
            $this.closest("tr").addClass("highlight");
        } else {
            $this.closest("tr").removeClass("highlight");
        }
    });

answered Jul 8, 2012 at 1:57

Mujah Maskey

8,8148 gold badges43 silver badges61 bronze badges

Comments

elclanrs · Accepted Answer · 2012-07-08 01:51:28Z

0

$('[type="checkbox"]').change(function(){
  $(this).parents('tr').toggleClass('highlight')
})

answered Jul 8, 2012 at 1:51

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

3 Comments

Tats_innit Over a year ago

Hiya bruv, small note :) make it is(':checked') since it should be highlighted when checked.

elclanrs Over a year ago

Or you can just add the class in the html for the checkbox that are checked by default. Unless he has dynamic elements, I would do that and keep the js smaller.

gaurang171 Over a year ago

you can not use parents as if the the table is inside anther table it will highlight all row in the hierarchy. use closest instead. also cant just toggle without checking if its checked or not.

Tats_innit · Accepted Answer · 2012-07-08 01:51:58Z

0

Demo http://jsfiddle.net/328QV/

code

$(document).ready(function() {
    $("#Table input").click(function() {
        if ($(this).is(":checked")) {
            $(this).parent().parent().addClass("highlight");
        } else {
            $(this).parent().parent().removeClass("highlight");
        }
    });
});

answered Jul 8, 2012 at 1:51

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

Comments

Sukanya1991 · Accepted Answer · 2015-04-13 09:16:01Z

0

Check out this fiddle

JS

$(document).ready(function () {
    $("input:checkbox").change(function () {
        alert();
        if ($(this).prop("checked") == true) {
            $(this).closest('tr').addClass("checked");
        } else $(this).closest('tr').removeClass("checked");
    });
});

CSS

.checked {
    background-color:red;
}

answered Apr 13, 2015 at 9:16

Sukanya1991

7763 silver badges17 bronze badges

Comments

Ahmed Sherif · Accepted Answer · 2020-05-03 09:27:45Z

0

Worked for me

      $(document).on('click','tr',function(){
    if ($(this).css('background-color')=="rgb(143, 162, 225)") {

        $(this).find('input[type="checkbox"]').prop('checked',false);

        $(this).css('background','#ffffff'); 
    } else{
        $(this).find('input[type="checkbox"]').prop('checked',true);

        $(this).css('background','#8FA2E1'); `enter code here`
    }
});

answered May 3, 2020 at 9:27

Ahmed Sherif

1

Collectives™ on Stack Overflow

Highlight table row with checkbox using jQuery

6 Answers 6

2 Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related