javascript - 使用 Jquery 检查时更改复选框的背景颜色

Question

我正在尝试使用其中的复选框更改 div 的背景颜色。我制作了这个http://jsfiddle.net/B7P65/以供参考。我正在尝试用“突出显示”div 替换父 div，所以我认为切换 div 会起作用。取消选中该复选框时，我希望背景颜色恢复正常（或删除“突出显示” div）。任何帮助表示赞赏。

Answer 1

您错误地使用了parent()方法。您想toggleClass()从方法中提取parent()方法并将其单独放置。

尝试以下更新：

$(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')额外的东西，如果你想使用被检查的逻辑，:)

代码

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