使用Jquery选中复选框时，更改复选框的背景色

Change background color of a checkbox when checked with Jquery

本文关键字：复选框 背景色 Jquery 使用      更新时间：2023-09-26

我正在尝试更改带有复选框的div的背景色http://jsfiddle.net/B7P65/以供参考。我正试图用'highlight'div替换父div，所以我认为togglediv会起作用。当取消选中复选框时，我希望背景颜色恢复正常（或删除"highlight"div）。感谢您的帮助。

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

尝试以下更新：

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

完成：

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

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

工作演示http://jsfiddle.net/q3NN2/或AN其他方式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");
    }
});

试试这个：http://jsfiddle.net/B7P65/1/

此代码用于在选中时突出显示类，在未选中时删除类。

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;
}
相关文章：