javascript - 点击状态；表单控件组的样式

Question

我在一个表单中有一组单选控件。每一个都包裹在 <label> 中样式元素。

当页面加载时，每个标签都通过 CSS 设置了背景颜色。 .

我希望用户能够单击组中的任何单选按钮来切换它的父级 <label>背景颜色。

从用户体验的 Angular 来看，我需要每个选中的控件都切换其父标签背景颜色。我在整个 radio 控制组中都需要这个。

<form>
<label>     
 <input type="radio" name="question1">
</label>
<label>     
 <input type="radio" name="question1">
</label>
<label>     
 <input type="radio" name="question1">
</label>
<label>     
 <input type="radio" name="question2">
</label>
<label>     
 <input type="radio" name="question2">
</label>
<label>     
 <input type="radio" name="question2">
</label>
<label>     
 <input type="radio" name="question3">
</label>
<label>     
 <input type="radio" name="question3">
</label>
<label>     
 <input type="radio" name="question3">
</label>

我的方法；

我知道不能使用 CSS 选择父元素所以它是 jQuery 的。

使用 jQuery，我可以将一些逻辑应用于整个单选按钮集，如下所示:

$(':radio').each( function (i, el) {
 $(this).on('change', function(){
    if($(this).is(':checked')){
        $(this).parent().css('background', '#ba9bc9');
    }
    $(this).on('blur', function(){
         $(this).parent().css('background', '#09afed');
    });
 });
});

这有效，但它仅适用于当前选定的元素。单击离开会失去焦点。我需要它来保持整个问题集的状态。所以问题 #1 - #3 都可能以彩色背景结束。

Answer 1

您可以找到具有相同名称的 radio ，并从中删除类，然后再将类添加到被单击的 radio 。

var $radios = $(':radio');

$radios.on('click', function(e){
  $radios.filter('[name="'+ e.target.name +'"]').not(e.target).parent().removeClass('selected');
  $(e.target).parent().addClass('selected');
});

.selected {
  background-color: red; //or whatever
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>     
 <input type="radio" name="question1">
</label>
<label>     
 <input type="radio" name="question1">
</label>
<label>     
 <input type="radio" name="question1">
</label>
<label>     
 <input type="radio" name="question2">
</label>
<label>     
 <input type="radio" name="question2">
</label>
<label>     
 <input type="radio" name="question2">
</label>
<label>     
 <input type="radio" name="question3">
</label>
<label>     
 <input type="radio" name="question3">
</label>
<label>     
 <input type="radio" name="question3">
</label>