点击状态；表单控件组的样式答案

【问题标题】：Clicked state; styling on groups of form controls点击状态；表单控件组的样式
【发布时间】：2018-09-27 14:53:55
【问题描述】：

我在一个表单中有一组无线电控件。每一个都包裹在一个<label> 元素中以进行样式设置。

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

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

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

<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 都可能以彩色背景告终。

【问题讨论】：

当一个单选按钮被选中时，找到所有其他同名的单选按钮，并删除它们的样式。
所以您想在单击收音机时更改包装收音机的标签的颜色？
你的标签需要包装你的收音机吗？
恐怕标签需要包装收音机。
由于代码是使用 WP 插件生成的，因此我无法或几乎无法控制输出。

标签： javascript jquery

【解决方案1】：

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

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>

【讨论】：

效果很好。再次感谢。

【解决方案2】：

如果你有能力并且愿意重构你的代码，你可以完全使用 css 来做到这一点：

label {
  background: #ccc;
}

[type="radio"]:checked+label {
  background: #b00;
}

<form>
  <input id="lbl01" type="radio" name="question1">
  <label for="lbl01">01</label>
  <input id="lbl02" type="radio" name="question1">
  <label for="lbl02">02</label>
  <input id="lbl03" type="radio" name="question1">
  <label for="lbl03">03</label>
  <br/>
  <input id="lbl04" type="radio" name="question2">
  <label for="lbl04">04</label>
  <input id="lbl05" type="radio" name="question2">
  <label for="lbl05">05</label>
  <input id="lbl06" type="radio" name="question2">
  <label for="lbl06">06</label>
  <br/>
  <input id="lbl07" type="radio" name="question3">
  <label for="lbl07">07</label>
  <input id="lbl08" type="radio" name="question3">
  <label for="lbl08">08</label>
  <input id="lbl09" type="radio" name="question3">
  <label for="lbl09">09</label>
</form>

【讨论】：