html - 选中时如何更改复选框的背景颜色，以及从选中状态取消选中时如何更改为重置？

Question

如何在选中时更改复选框父节点的背景颜色，并在未选中状态时将其更改回默认值？

Answer 1

检查这个小提琴

Javascript：

$(function() {

    $('input[type=checkbox]').each(function() {
        var span = $('<span class="' + $(this).attr('type') + ' ' + $(this).attr('class') + '"></span>').click(doCheck).mousedown(doDown).mouseup(doUp);
        if ($(this).is(':checked')) {
            span.addClass('checked');

        }
        $(this).wrap(span).hide();
    });

    function doCheck() {
        if ($(this).hasClass('checked')) {
            $(this).removeClass('checked');
            $(this).css("background-color","white");
            $(this).children().prop("checked", false);
        } else {
            $(this).addClass('checked');
            $(this).children().prop("checked", true);
        }
    }

    function doDown() {
        $(this).addClass('clicked');
        $(this).css("background-color","green");
    }

    function doUp() {
        $(this).removeClass('clicked');
    }
});

CSS

.checkbox, .radio {
    width: 19px;
    height: 20px;
    padding: 0px;
    background: url("http://i48.tinypic.com/raz13m.jpg");
    display: block;
    clear: left;
    float: left;
 }

.checked {
     background-position: 0px -50px;   
}

.clicked {
     background-position: 0px -25px;
}

.clicked.checked {
     background-position: 0px -75px;
}

.green {
    background-color: white;
 }

HTML 代码

<p><input type="checkbox" name="1" class="styled green"/> (green)</p>

只需检查点击事件并更改css。这会成功的。

Answer 2

如果您使用的是 jQuery，您可以为您的复选框尝试点击事件，如下所示：

$(document).on('click', '#checkbox-id', function(event){     

    // Determine if the checkbox is checked or not
    $checked = $("#checkbox-id").is(':checked');        

    // Change background color of the parent node
    if($checked)
        $(this).parent().css("background-color","yellow");
    else
        $(this).parent().css("background-color","white");
});