使用Jquery選中時更改復選框的背景色

Question

我正在嘗試更改帶有復選框的div的背景顏色。 我已經將此http://jsfiddle.net/B7P65/做為參考。 我正在嘗試將父div替換為“ highlight” div，所以我認為切換div會起作用。 取消選中該復選框后，我希望背景色恢復正常（或刪除“突出顯示” div）。 任何幫助表示贊賞。

Answer 1

您使用了不正確的parent（）方法。 您要從parent()方法中提取toggleClass()方法並將其分開放置。

嘗試以下更新：

$(this).parent().toggleClass("highlight");

完成：

$("input:checkbox").click(function() {
    var actualTime = "";
    $(this).parent().toggleClass("highlight");
});

演示： http ： //jsfiddle.net/Hmq65/

Answer 2

工作演示 http://jsfiddle.net/q3NN2/ 或其他方式 http://jsfiddle.net/KUhFp/

第二個演示演示了如何使用.is(':checked')來使用，如果您想使用is選中的邏輯， :)

碼

$("input:checkbox").click(function() {
    var actualTime = "";
    $(this).parent().toggleClass("highlight");
});

碼

$("input:checkbox").click(function() {
    var actualTime = "";
    if ($(this).is(':checked')) {
        $(this).parent().addClass("highlight");

    } else {
        $(this).parent().removeClass("highlight");
    }
});

Answer 3

試試這個： http : //jsfiddle.net/B7P65/1/

Answer 4

此代碼用於選中時突出顯示，而未選中時刪除類。

JavaScript：

    $('#your table id tr')
    .filter(':has(:checkbox:checked)')
    .addClass('highlight')
    .end()
    .click(function(event) {
        $(this).toggleClass('highlight');
    if (event.target.type !== 'checkbox') {
        $(':checkbox', this).attr('checked', function() {
        return !this.checked;
    });
  }
});

CSS：

.highlight{
    background-color:green;
}