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