我在一个表单中有一组单选控件。每一个都包裹在 <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 都可能以彩色背景结束。
最佳答案
您可以找到具有相同名称的 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>
关于javascript - 点击状态;表单控件组的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52539786/