6

次のように、いくつかのチェックボックスを含むフォームがあります。

<div><input type='checkbox' name='groupid' value='1'>1</div>
<div><input type='checkbox' name='groupid' value='2'>2</div>
<div><input type='checkbox' name='groupid' value='3'>3</div>

私がやろうとしているのは、チェックボックスがチェックされているとき、divの背景色を変更し、チェックされていないときは背景色を削除することです。jqueryを使用してこれを行うにはどうすればよいですか?

ありがとう

4

3 に答える 3

13

jQuery:

$("input[type='checkbox']").change(function(){
    if($(this).is(":checked")){
        $(this).parent().addClass("redBackground"); 
    }else{
        $(this).parent().removeClass("redBackground");  
    }
});

CSS:

.redBackground{
    background-color: red;  
}

div親の CSS を直接変更するのではなく、Add/Remove クラスを使用することをお勧めします。

デモ: http://jsfiddle.net/uJcB7/

于 2012-06-04T22:45:33.177 に答える
5

CSS 属性を直接変更する 1 つのソリューション:

$(":checkbox").on("change", function() {
    var that = this;
    $(this).parent().css("background-color", function() {
        return that.checked ? "#ff0000" : "";
    });
});​

デモ: http://jsfiddle.net/YQD7c/

を使用した別のソリューションtoggleClass：

$(":checkbox").on("change", function() {
    $(this).parent().toggleClass("checked", this.checked);
});​

checked次のように CSS でクラスを定義する場所:

.checked {
    background-color: #ff0000;
}​

デモ: http://jsfiddle.net/YQD7c/1/

于 2012-06-04T22:45:43.850 に答える
0

これが古いスレッドであることは承知していますが、検索に来て、この回答がほとんどの方法で得られました。（WordPressの調整が必要でした）したがって、誰かがWordPressを使用している同じページにアクセスした場合、これを試してみてください。私にとってはうまくいきました.

スクリプト

jQuery("input[type='checkbox']").change(function(){
if(jQuery(this).is(":checked")){
    jQuery(this).parent().addClass("greenBackground"); 
}
else{
    jQuery(this).parent().removeClass("greenBackground");  
} });

CSS

.greenBackground{
background-color: #06530e;  
color: #ffffff;}
于 2016-08-19T18:34:14.133 に答える