入力フィールドがチェックされている場合は、cssクラスを追加

Question

私は可変価格を表示していますが、選択/選択した価格のみを表示したいとします。

私のコードは次のよう：

<ul> 
<li class="km-price-options" id="price_option_115_ssize"> 
    <label> 
    <input type="radio" name="options[price_id][]" id="price_option_115_1" class="price_option_115" value="1" data-price="9.95"> 
    <span>S Size</span> 
    </label> 
</li> 
<li class="km-price-options" id="price_option_115_msize"> 
    <label> 
    <input type="radio" checked="checked" name="options[price_id][]" id="price_option_115_2" class="price_option_115" value="2" data-price="19.25"> 
    <span>M Size</span> 
    </label> 
</li> 

<li class="km-price-options" id="price_option_115_xsize"> 
    <label> 
    <input type="radio" name="options[price_id][]" id="price_option_115_3" class="price_option_115" value="3" data-price="99.50"> 
    <span>X Size</span> 
    </label> 
</li> 
... 
</ul> 

他の場所でページの価格

<div class="km-item-price"> 

<div class="km-price km-price-option-1"> 
    <div class="km-item-price">$9.95</div> 
</div> 

<div class="km-price km-price-option-2 checked"> 
    <div class="km-item-price">$19.25</div> 
</div> 

<div class="km-price km-price-option-3"> 
    <div class="km-item-price">$99.50</div> 
</div> 

... 

</div> 

デフォルトのオプション2で、ドロップダウンメニュー内の入力フィールドと 可変価格がチェックされます。 オプション1がドロップダウンメニュー内で選択されている場合、checkedクラスをkm-price-option-2から削除し、km-price-option-1に追加します。入力フィールドchecked="checked"と同じです。次のように

これまでのところ、私のjqueryのコードは次のとおりです。

$('input:radio').change(function(){ 
    if($(this).is(":checked")) { 
     $('.km-price').addClass("checked"); 
    } else { 
     $('.km-price').removeClass("checked"); 
    } 
}); 

これは名前km-priceですべてのdiv要素にcheckedクラス名を追加します。 ただし、value="1"（入力）に限定する必要があります。これはjqueryで可能ですか？はいの場合、どうですか？もっと良い方法があれば、私はすべて耳です。 :)

Answer 1

checkedクラスを追加するクラスにラジオボタンの値を追加します。

$('input:radio').click(function(){ 
    $('.km-price').removeClass("checked"); 
    $('.km-price-option-' + this.value).addClass("checked"); 
}); 

ラジオボタンなので、$(this).is(":checked")をテストする必要はありません。あなたがクリックしたボタンは、常にチェックされたボタンです。

Answer 2

Decoupling Your HTML, CSS, and JavaScriptを読んでください。

HTML：

<input type="radio" 
     name="options[price_id][]" 
     id="price_option_115_3" 
     class="price_option_115 js-update-checked" 
     value="3" 
     data-price="99.50" 
     data-target=".km-price-option-3"> 

のjQuery：

$('.js-update-checked').on("click", function(){ 
    $('.km-price').removeClass("checked"); 
    var selector = $(this).data("target"); 
    $(selector).addClass("checked"); 
}); 

今のページに新しいラジオボタンを追加すると、奇妙な事はラジオボタンのこのセットに起こることはありません。これも完全に再利用可能で拡張性があります。

Answer 3

.index()に基づいて、:eq()を使用した例です。

$('input:radio').change(function() { 
 
    $('.km-price').removeClass("checked"); 
 
    $('.km-price:eq(' + $(this).index('input:radio') + ')').addClass("checked"); 
 
});

.checked { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="km-price-options" id="price_option_115_ssize"> 
 
    <label> 
 
     <input type="radio" name="options[price_id][]" id="price_option_115_1" class="price_option_115" value="1" data-price="9.95"> 
 
     <span>S Size</span> 
 
    </label> 
 
    </li> 
 
    <li class="km-price-options" id="price_option_115_msize"> 
 
    <label> 
 
     <input type="radio" checked="checked" name="options[price_id][]" id="price_option_115_2" class="price_option_115" value="2" data-price="19.25"> 
 
     <span>M Size</span> 
 
    </label> 
 
    </li> 
 

 
    <li class="km-price-options" id="price_option_115_xsize"> 
 
    <label> 
 
     <input type="radio" name="options[price_id][]" id="price_option_115_3" class="price_option_115" value="3" data-price="99.50"> 
 
     <span>X Size</span> 
 
    </label> 
 
    </li> 
 
</ul> 
 

 
<div class="km-item-price"> 
 

 
    <div class="km-price km-price-option-1"> 
 
    <div class="km-item-price">$9.95</div> 
 
    </div> 
 

 
    <div class="km-price km-price-option-2 checked"> 
 
    <div class="km-item-price">$19.25</div> 
 
    </div> 
 

 
    <div class="km-price km-price-option-3"> 
 
    <div class="km-item-price">$99.50</div> 
 
    </div> 
 
</div>