使用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.

Answer 1

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

Answer 2

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

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

Answer 3

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

Answer 4

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");
        }
    });
});​

Answer 5

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;
}

Answer 6

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`
    }
});