1

チェックボックスをクリックして「ボックス」の色を変更する方法を知りたいです。ラベルの色を変更したくありません。ボックスをクリックしてボックスの色を変更したいだけです。

 <input type="checkbox" name="1" class="styled green"/> 1
 <input type="checkbox" name="2" class="styled red" checked/> 2
 <input type="checkbox" name="3" class="styled purple" /> 3
4

3 に答える 3

1

通常、これはできません。CSS といくつかの JavaScript で遊ぶ必要があり、カスタム チェックボックスを使用する必要があります。

考えられる例の1つはここにあります

于 2013-07-20T10:07:10.403 に答える
0

これでうまくいくはずです（ただし、特にチェックボックスの状態で、ビットテストと微調整が必​​要です）。

// elementbyid shorthand
var $ = function(id) {
    return document.getElementById(id);
};

// this function handles background color
var markCheckbox = function(e) {
    // find id + class name
    var showId = e.target.id;
    var color = e.className
    // change color
    $(id).style.backgroundColor = color;
};

// this gets invoked when page got loaded
window.addEventistener('load', function() {
    var getElements = document.getElementsByTagName('input');
    // loop through all input elements
    for(var i = 0; i < getElements.length; i++) {
        // control if it's a checkbox + bind click event.
        if(getElements[i].type == 'checkbox') {
            (getElements[i].id).addEventListener('click', markCheckbox);
        }
    }
}
于 2013-07-20T10:33:25.463 に答える
0

私の2 ¢ :

http://roxon.in/scripts/checkbox_radio_custom.html

基本的に、数行の JS - jQuery を使用して、チェックボックスを<span>要素に置き換えることができます。（または、派手にしたい場合は、リンク例で行ったように2つ使用します。）

$(':checkbox').each(function(){
    var $c = $(this);
    $c.hide().after('<span/>');
    $c.next('span').click(function(){
        $c[0].checked^=1;
    });
});

必要なのは、CSS と CSS3 アニメーションを使用して創造的になることだけです。hidden の後に追加された jQuery
をターゲットにする方法は次のとおりです。SPANINPUT

/* target the hidden checkbox's next SPAN element: */
input[type=checkbox] + span{

}
/* Custom checkbox HOVER: */
input[type=checkbox] + span:hover{

}
/* Custom checkbox CHECKED STATE */
input[type=checkbox]:checked + span{

}

楽しむ。

于 2013-07-20T10:48:31.063 に答える