Jqueryチェックボックスがオンの場合はクラスを追加

Question

チェックボックスをオンにしたときにクラスを追加しようとしています。

私のjqueryの：

$('input').attr("checked").change(function(){ 
$('div.menuitem').addClass("menuitemshow"); 
}) 

Answer 1

あなたはcheckbox、入力はすべての入力を選択します選択する$("input")を使用しないでください。代わりに、使用することができます。基本的にこれが何をするか

$('input:checkbox').change(function(){ 
    if($(this).is(":checked")) { 
     $('div.menuitem').addClass("menuitemshow"); 
    } else { 
     $('div.menuitem').removeClass("menuitemshow"); 
    } 
}); 

をチェックボックスが変更されたときfunction(){}内部にあるものは何でも実行しています。次に、あなただけのチェックボックスがチェックされているかどうかチェックするためのjQuery isを使用することができます。..

Answer 2

ことは、これを試してみてください：

$('input').change(function(){ 
    if ($(this).is(':checked')) { 
     $('div.menuitem').addClass("menuitemshow"); 
    } 
}); 

あなたは、チェックボックス自体の変更イベントをチェックし、かどうかを確認するための条件を実行して代わりに、属性に変更イベントを持つことができませんそれはチェックされています。

Answer 3

クラスをチェックボックスで切り替えることを前提にしています。

$('input').change(function(){ 
    var $this = $(this), $div = $('div.menuitem'); 
    if($this.is(':checked')) 
    { 
    $div.addClass('show'); 
    } 
    else 
    { 
    $div.removeClass('show'); 
    } 
}).change(); 

私はこれがなるように更新しましたが、私がこれまで読んだコメント与えソリューション@Rails初心者の問題を示唆しました。

最後の行にchange()が追加されていることに注意してください。これは、ページロード時にchangeを即座に実行させることです（を待つか、、が作成された後にを書き込んだと仮定しています）。

Answer 4

$('input:checkbox').change(function() { 
    if (this.checked) { 
     $('div.menuitem').addClass("menuitemshow"); 
    } 
}); 

Answer 5

// if checkbox checked then backgorund color will be gray 
// there should be a input type check box with a parent class label. 

$('input:checkbox').change(function(){ 
    if($(this).is(':checked')) 
     $(this).parent().addClass('selected'); 
    else 
     $(this).parent().removeClass('selected') 
}); 

// input check box should be like this 
<label class="" ><input type="checkbox" name="blabla" /></label> 

を、これは

//css 
.selected { 
background:gray 
} 

Answer 6

$('.vfb-checkbox input:checkbox').change(function(){ 
 
    if($(this).is(":checked")) { 
 
     $('.vfb-checkbox label').addClass("checked"); 
 
    } else { 
 
     $('.vfb-checkbox label').removeClass("checked"); 
 
    } 
 
});

.vfb-checkbox{ 
 
    width:180px; 
 
    height:130px; 
 
background:url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/2932337756_1845773ed4_q_d_zpsea5idhnt.jpg'); 
 
} 
 
/* checkboxes */ 
 

 
.vfb-checkbox label { 
 
\t \t cursor: pointer; 
 
\t  display: block; 
 
\t  position: relative; 
 
    width:100%; 
 
    height:100%; 
 

 
\t } 
 

 
.vfb-checkbox label:hover{ 
 
    background:rgba(0,0,0,.7) url(http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png)center center no-repeat; 
 
} 
 

 
\t 
 
.vfb-checkbox input[type=checkbox] { 
 
    \t display: none; 
 
\t } 
 
\t 
 
.checked{ 
 
    \t  background: rgba(0,0,0,.4) url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png') center center no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="vfb-checkbox"> 
 
    <label id="checkbox" for="check1"> 
 
    <input id="check1" type="checkbox" name="check" value="check1"> 
 
    </label> 
 
</div> 
 
<div class="vfb-checkbox"> 
 
    <label id="checkbox" for="check1"> 
 
    <input id="check1" type="checkbox" name="check" value="check1"> 
 
    </label> 
 
</div>

）（ラベルタグに「選択」クラスを追加します

チェックボックスでjqueryを使用しました。ある要素をクリックすると、他の要素が実行されます。この問題を解決するにはどうすればよいですか？