Jquery 如果选中输入字段，则添加css类

我正在显示可变价格，但我只想显示所选/所选价格

我的代码如下： 下拉菜单中带有输入字段的可变价格

<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>

这将在名为

km price

的所有div上添加一个

选中的

类名。

---

但应限制为

value=“1”

（输入）。使用jquery可以做到这一点吗？如果是，如何进行？如果有更好的办法，我洗耳恭听。：）

将单选按钮的值附加到要将选中的

类添加到的类中

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

因为它是一个单选按钮，所以不需要测试
$（this）.is（“：checked”）
。您单击的按钮始终是选中的按钮。
将单选按钮的值附加到要将选中的
类添加到的类中

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

因为它是一个单选按钮，所以不需要测试
$（this）.is（“：checked”）
。您单击的按钮始终是选中的按钮。
花点时间阅读

Html:

现在，在页面中添加新的单选按钮不会导致这组单选按钮发生奇怪的事情。它现在也可以完全重用和扩展。
花点时间阅读

Html:

现在，在页面中添加新的单选按钮不会导致这组单选按钮发生奇怪的事情。它现在也可以完全重用和扩展。
下面是基于
.index（）
和使用
：eq（）
的示例


$（'input:radio'）。更改（函数（）{
$（“.km价格”）.removeClass（“选中”）；
$（'.km price:eq（'+$（this）.index（'input:radio'）+'））.addClass（“checked”）；
});
。已选中{
颜色：红色；
}



S码


M码



$9.95
$19.25
$99.50
以下是基于
.index（）
并使用
：eq（）
的示例


$（'input:radio'）。更改（函数（）{
$（“.km价格”）.removeClass（“选中”）；
$（'.km price:eq（'+$（this）.index（'input:radio'）+'））.addClass（“checked”）；
});
。已选中{
颜色：红色；
}



S码


M码



$9.95
$19.25
$99.50
学到了一些新东西（
.index（）
和
：eq（）
）。谢谢。学习了一些新知识（
.index（）
和
：eq（）
）。非常感谢。
$('input:radio').click(function(){
    $('.km-price').removeClass("checked");
    $('.km-price-option-' + this.value).addClass("checked");
});

<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">

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