html - チェックボックスがチェックされているときにチェックボックスの背景色を変更し、チェックされた状態からチェックされていないときにリセットに変更するにはどうすればよいですか?

Question

チェックボックスの親ノードの背景色をチェックされているときに変更し、チェックされていない状態からチェックされていないときにデフォルトに戻すにはどうすればよいですか?

Answer 1

jQuery を使用している場合は、以下のように、チェックボックスの on click イベントを試すことができます。

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

Answer 2

このフィドルをチェック

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を変更するだけです。これでうまくいきます。