更改单选按钮组的标签类
下面是使用引导模板的单选按钮组的代码片段。但我试图做的是每次切换选项时更改单选按钮的类部分（即选中单选按钮时，标签类将为“btn btn primary”，如果未选中，标签类将为“btn btn default”）。有人知道如何做到这一点吗？
<body>
<div class = "form-group">
<label class = "control-label col-md-3 col-sm-3 col-xs-12">Gender</label>
<div class = "col-md-6 col-sm-6 col-xs-12">
<div id = "gender" class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-default" data-toggle-active-class = "btn-primary" data-toggle-passive-class = "btn-default">
<input type = "radio" name = "gender" value = "male"> Male
</label>
<label class = "btn btn-primary" data-toggle-class = "btn-primary" data-toggle-passive-class = "btn-default">
<input type = "radio" name = "gender" value = "female"> Female
</label>
</div>
</div>
</div>
</body>
共有3个答案
您可以使用jQuery轻松完成此操作，在底部使用this-
$('input[type=radio]').each(function(){
if($(this).prop('checked')){
$(this).removeClass('btn-default').addClass('btn-primary');
}else{
$(this).removeClass('btn-primary').addClass('btn-default');
}
});
您可以执行以下操作：
$(function(){
$(".checkbox-class").change(function() {
$("#gender").toggleClass("show-hide", this.checked)
}).change();
});
或者，您可以使用jQuery尝试addClass和removeClass方法
你可以这样做：
$('input:radio').change(function(){
var $self = $(this);
if ($self.prop('checked')) {
$('input[type=radio]').parent().removeClass('btn-primary');
$self.parent().addClass('btn-primary');
} else {
$self.parent().removeClass('btn-default');
}
});
在这里工作小提琴代码：https://jsfiddle.net/3r602pcg/
-
我正在开发一个基于测验的应用程序。将有1个问题和4个选项（单选按钮）。如果用户选择了任何错误的答案，那么我想将单选按钮颜色变为红色。如何做到这一点？
-
问题内容： 我已经在单选组中动态创建了两个单选按钮，并选中其中一个。我需要在我按下另一个按钮时将其值保存在字符串中。但是我已经为此实现了，但是第一次没有用。这是我的代码。 问题答案： xml文件 Java代码
-
在我的项目中，我正在尝试用单选按钮更改src。` 正如你从我的代码中看到的，我正在尝试改变4个SRC。“Imghali”和“Qrimage”正在为我的项目工作。当我检查我的按钮(birinci1和birinci2)“imghali”和“qrimage”时，src正在改变。但是“Arhali”src（AR-Button的src）没有改变。 这里怎么了？任何解决方案或建议都会很好。 我的项目链接 nu
-
我有并发布了jQuery代码，用于检查选中了哪一个单选按钮，然后更改其中一些按钮的颜色。此外，我还想在其中一个按钮被按下后禁用这些按钮。我的问题是，当我检查例如'a'时，所有的答案都变成红色，而不是'a'变成绿色，所有其他的都变成红色。 null null
-
问题内容： 是否可以将css（3）样式应用于选中的单选按钮的标签？ 我有以下标记： 我希望的是 会做某事，但是可惜它没有（我预期的那样）。 是否有一个选择器可以实现这种功能？如果有帮助，您可以将divs围起来，但是最好的解决方案是使用标签“ for”属性。 应该注意的是，我能够为我的应用程序指定浏览器，所以请最好使用css3等类。 问题答案： 尝试符号：它是相邻的同级组合器。它结合了两个具有相同父
-
我已经建立了一个表单，允许用户按日期、Asc或Desc排序。 到目前为止，我已经找到了让用户： 1） 选择一个单选按钮。 2）提交后保留单选按钮。 3） 向所选用户显示书面信息。 HTML/PHP代码： 我想通过在选择时添加颜色背景，直观地显示用户的选择。背景色应横跨单选按钮和标签。这在CSS中是可能的吗？到目前为止，这是我所拥有的，只有标签使用了颜色/样式：