入力がチェックされた場合に要素にクラスを追加します。

Question

基本的には、入力がチェックされるとクラスに要素を追加するのが好きです。

例：

ID「オプション1」とチェックボックスがオンになります場合は、私は、ID「SLCT-1」を要素に「アクティブ」クラスを追加したいです。チェックボックスがオフになっている場合は、クラス「アクティブ」をもう一度追加します。

.slct-feedback{ 
 
margin-bottom: 40px; 
 
} 
 

 
.slct-option.active{ 
 
color: #0095ff; 
 
}

<div class="slct-feedback"> 
 
<div class="slct-option active" id="slct-1">Option 1</div> 
 
<div class="slct-option" id="slct-2">Option 2</div> 
 
<div class="slct-option" id="slct-3">Option 3</div> 
 
</div> 
 

 
<label class="option-checkbox"> 
 
<span class="sub">Option 1</span> 
 
<input type="checkbox" name="options" value="1" id="option1" checked> 
 
</label> 
 

 
<label class="option-checkbox"> 
 
<span class="sub">Option 2</span> 
 
<input type="checkbox" name="options" value="2" id="option2"> 
 
</label> 
 

 
<label class="option-checkbox"> 
 
<span class="sub">Option 3</span> 
 
<input type="checkbox" name="options" value="3" id="option3"> 
 
</label>

Answer 1

：同じイベントハンドラを繰り返すこと

すべての入力にイベントを書き込むことができます。チェックボックスには、#slct-要素に「アクティブ」クラスを追加/削除できる値が表示されます。

$('input[type=checkbox]').click(function(){ 
 
    if(this.checked){ 
 
    $('#slct-'+this.value).addClass('active'); 
 
    }else{ 
 
    $('#slct-'+this.value).removeClass('active'); 
 
    } 
 
});

.slct-feedback{ 
 
margin-bottom: 40px; 
 
} 
 

 
.slct-option.active{ 
 
color: #0095ff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="slct-feedback"> 
 
<div class="slct-option active" id="slct-1">Option 1</div> 
 
<div class="slct-option" id="slct-2">Option 2</div> 
 
<div class="slct-option" id="slct-3">Option 3</div> 
 
</div> 
 

 
<label class="option-checkbox"> 
 
<span class="sub">Option 1</span> 
 
<input type="checkbox" name="options" value="1" id="option1" checked> 
 
</label> 
 

 
<label class="option-checkbox"> 
 
<span class="sub">Option 2</span> 
 
<input type="checkbox" name="options" value="2" id="option2"> 
 
</label> 
 

 
<label class="option-checkbox"> 
 
<span class="sub">Option 3</span> 
 
<input type="checkbox" name="options" value="3" id="option3"> 
 
</label>

Answer 2

使用

$('input:checkbox').change(function(){ 
    if($(this).is(":checked")) { 
     $('div.slct-option').addClass("active"); 
    } 
}); 

これを行うには、あなたが設定し、チェックボックスのcheckedプロパティと一緒にtoggleClass()メソッドを使用することができますinput:checked

Answer 3

jQueryのAPIのducumentation参照してください。クラスを追加するか再作成するか移動した。あなたの意図は、あなたがそれらを一致する要素のインデックスを使用してコードを乾燥させることができるのdiv slct-optionに、各チェックボックスを関連付けることであるならばという

$('#option1').change(function() { 
 
    $('#slct-1').toggleClass('active', this.checked); 
 
});

.slct-feedback { margin-bottom: 40px; } 
 
.slct-option.active { color: #0095ff; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slct-feedback"> 
 
    <div class="slct-option active" id="slct-1">Option 1</div> 
 
    <div class="slct-option" id="slct-2">Option 2</div> 
 
    <div class="slct-option" id="slct-3">Option 3</div> 
 
</div> 
 

 
<label class="option-checkbox"> 
 
    <span class="sub">Option 1</span> 
 
    <input type="checkbox" name="options" value="1" id="option1" checked> 
 
</label> 
 

 
<label class="option-checkbox"> 
 
    <span class="sub">Option 2</span> 
 
    <input type="checkbox" name="options" value="2" id="option2"> 
 
</label> 
 

 
<label class="option-checkbox"> 
 
    <span class="sub">Option 3</span> 
 
    <input type="checkbox" name="options" value="3" id="option3"> 
 
</label>

注意、代わりにこれを試してみてください

$('.option').change(function() { 
 
    $('.slct-option').eq($(this).index('.option')).toggleClass('active', this.checked); 
 
}).change();

.slct-feedback { margin-bottom: 40px; } 
 
.slct-option.active { color: #0095ff; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slct-feedback"> 
 
    <div class="slct-option">Option 1</div> 
 
    <div class="slct-option">Option 2</div> 
 
    <div class="slct-option">Option 3</div> 
 
</div> 
 

 
<label class="option-checkbox"> 
 
    <span class="sub">Option 1</span> 
 
    <input type="checkbox" name="options" value="1" class="option" checked> 
 
</label> 
 

 
<label class="option-checkbox"> 
 
    <span class="sub">Option 2</span> 
 
    <input type="checkbox" name="options" value="2" class="option"> 
 
</label> 
 

 
<label class="option-checkbox"> 
 
    <span class="sub">Option 3</span> 
 
    <input type="checkbox" name="options" value="3" class="option"> 
 
</label>

Answer 4

一つの方法は、jQueryのを使用して、これを達成することです：

inputs = $("input[name='options']"); 
inputs.each(function(){ 
    $(this).on('click', function(){ 
    value = $(this).attr('value'); 
    if ($(this).is(':checked')){ 
     $('#slct-' + value).addClass('active'); 
    } else { 
     $('#slct-' + value).removeClass('active'); 
    } 
    }); 
}); 

はCodepen作業。

Answer 5

このコードを試してみてください。

$('.option-checkbox #option1').click(function e() 
{ 
    $('.slct-feedback #slct-feedback').addClass('active'); 
});