如果輸入字段已選中，請添加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"); 
    } 
}); 

這將在所有的div添加checked類名的名稱km-price。 但它應該限於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>