Question

我有一个带标签的单选按钮列表：

＆＃13;

<input id="angry[1]" type="radio" name="emotion-rate-q1" value="angry" required="required" />
<label class="radio-score angry" for="angry[1]">1</label>
<input id="bad[1]" type="radio" name="emotion-rate-q1" value="bad" />
<label class="radio-score bad" for="bad[1]">2</label>
<input id="neutral[1]" type="radio" name="emotion-rate-q1" value="neutral" />
<label class="radio-score neutral" for="neutral[1]">3</label>
<input id="happy[1]" type="radio" name="emotion-rate-q1" value="happy" />
<label class="radio-score happy" for="happy[1]">4</label>
<input id="fantastic[1]" type="radio" name="emotion-rate-q1" value="fantastic" />
<label class="radio-score fantastic" for="fantastic[1]">5</label>

＆＃13;

在javascript（或jquery）中我希望当我点击这些按钮时，它适用于所有其他按钮的标签css类（因此使用新的css类我会将一些样式应用于未选中按钮）

Answer 1

jQuery方式。

$("input[type='radio']").change(function(){
  $("label").removeClass("active");
  $("label[for='"+$(this).attr("id")+"']").addClass("active");
});

它会将类active添加到所选单选按钮的标签中。这是fiddle

更新

$("input[type='radio']").change(function(){
 $("label").removeClass("active");
 $("label").not("label[for='"+$(this).attr("id")+"']").addClass("active");
});

Fiddle

Answer 2

我们可以通过以下方法获得解决方案。

 // 1. by using CSS3 
    input:not(:checked) + label {background:red }

// 2. by using jquery 
   if($('input[type="radio"]:not(:checked)')){
   $('label').addClass("active")
   }

将css类添加到所有未选中的单选按钮标签

2 个答案:

更新