Question

我正在尝试使用复选框更改div的背景颜色。我已将此http://jsfiddle.net/B7P65/作为参考。我正在尝试用'highlight'div替换父div，所以我认为切换div会起作用。取消选中该复选框后，我希望背景颜色恢复正常（或删除'highlight'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;
}

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

4 个答案: