javascript - 使用 jQuery 用复选框突出显示表格行

Question

我有以下 HTML 表格。每行包含一个复选框，后跟一些文本。

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

我需要一些帮助来编写一个脚本，该脚本将突出显示（添加一个类）已选中的行，取消选中将删除该类。

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

演示 http://jsfiddle.net/328QV/

代码

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

Answer 5

看看这个小提琴

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

为我工作

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