Javascript 更改选中的输入颜色（如果其文本等于某些文本）

我用一些单选按钮做了两张表格。我用css

：before

选择器更改了它们。我用字体来代替单选按钮。正如您所看到的代码，如果选中了单选按钮，并且其文本是“专家”，那么我将尝试更改颜色，然后添加一个具有不同颜色属性的类。我用click事件完成了这项工作，它现在可以工作了。但我希望这种情况发生在页面加载时，而不是单击后

任何帮助我都会感激的

$（文档）.ready（函数（）{
var radioBtn=$（‘表格标签范围’）；
radioBtn.单击（函数（）{
if（$（this）.prev（）.find（'input[type=“radio”]：checked'））{
如果（$（this）.text（）=='Expert'）{
$（this.addClass（'greenBox'）；
}
}
});
});
表单{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
页边距底部：0；
}
表格标签{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
光标：指针；
保证金权利：10%；
页边距底部：0；
}
表单标签输入{
显示：无；
溢出：隐藏；
}
表单标签输入+span{
字体大小：12px；
}
表单标签输入+span:：before{
内容：'\f096'；
字体系列：“FontAwesome”；
字体大小：52px；
字体风格：普通；
说：没有；
字体大小：正常；
字体变体：正常；
文本转换：无；
线高：1.2；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
颜色：#aab3c3；
}
表单标签输入：选中+span:：before{
内容：'\f14a'；
颜色：#aab3c3；
-webkit动画：检查0.3s轻松输入输出；
动画：检查0.3s的轻松输入输出；
}
表单标签输入：选中+span.greenBox:：before{
颜色：4cd20b；
}
@-webkit关键帧检查{
0% {
-webkit变换：缩放（0）；
变换：比例（0）；
}
70% {
-webkit转换：比例（1.1）；
转换：比例（1.1）；
} 
100% {
-webkit转换：规模（1）；
变换：比例（1）；
} 
}
@关键帧检查{
0% {
-webkit变换：缩放（0）；
变换：比例（0）；
}
70% {
-webkit转换：比例（1.1）；
转换：比例（1.1）；
} 
100% {
-webkit转换：规模（1）；
变换：比例（1）；
} 
}

专家
中间的
初学者
专家
中间的
初学者
您可以在
文档中添加以下代码。准备好
以实现绿色框：

$('input[name=radio]:checked').each(function() {
    $(this).next().addClass('greenBox');
});

上面的代码将在DOM ready上进行检查，如果有任何选中了
的
收音机
，如果是，它将添加相关的类
绿框

更新代码如下：


$（文档）.ready（函数（）{
$（'input[name=radio]：选中'）。每个（函数（）{
if（$（this）.next（）.text（）=='Expert'）
$（this.next（）.addClass（'greenBox'）；
});
var radioBtn=$（‘表格标签范围’）；
radioBtn.单击（函数（）{
if（$（this）.prev（）.find（'input[type=“radio”]：checked'））{
如果（$（this）.text（）=='Expert'）{
$（this.addClass（'greenBox'）；
}
}
});
});
表单{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
页边距底部：0；
}
表格标签{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
光标：指针；
保证金权利：10%；
页边距底部：0；
}
表单标签输入{
显示：无；
溢出：隐藏；
}
表单标签输入+span{
字体大小：12px；
}
表单标签输入+span:：before{
内容：'\f096'；
字体系列：“FontAwesome”；
字体大小：52px；
字体风格：普通；
说：没有；
字体大小：正常；
字体变体：正常；
文本转换：无；
线高：1.2；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
颜色：#aab3c3；
}
表单标签输入：选中+span:：before{
内容：'\f14a'；
颜色：#aab3c3；
-webkit动画：检查0.3s轻松输入输出；
动画：检查0.3s的轻松输入输出；
}
表单标签输入：选中+span.greenBox:：before{
颜色：4cd20b；
}
@-webkit关键帧检查{
0% {
-webkit变换：缩放（0）；
变换：比例（0）；
}
70% {
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}
100% {
-webkit转换：规模（1）；
变换：比例（1）；
}
}
@关键帧检查{
0% {
-webkit变换：缩放（0）；
变换：比例（0）；
}
70% {
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}
100% {
-webkit转换：规模（1）；
变换：比例（1）；
}
}

专家
中间的
初学者
专家
中间的
初学者
给每个单选按钮一个类，例如
rd expert

仅在
.rd expert
选择器上，使用
.greenBox
设置与当前相同的样式：选中
.psuedo选择器，不需要特殊的jQuery。
您可以使用与
$（文档）ready中的click事件处理程序相同的代码。


$（文档）.ready（函数（）{
功能检查按钮（el）{
if（$（el）.prev（）.find（'input[type=“radio”]：checked'））{
if（$（el）.text（）=='Expert'）{
$（el）.addClass（'greenBox'）；
}
}
}
var radioBtn=$（‘表格标签范围’）；
radioBtn.each（函数（）{
选中按钮（此）
})
radioBtn.单击（函数（）{
选中按钮（此）；
});
});
表单{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
页边距底部：0；
}
表格标签{
数字化信息系统