Javascript 窗体自定义单选按钮添加活动类以更改背景

我试图在一些单选按钮上添加一个活动类，但没有实际的单选按钮。更多的是，一组按钮将共享一个图像，生成html，因此会有点混乱

Css

如果有人知道的话，那是因为当我使用实际的类，例如

#wedo-contact .frm_radio:focus-within{
    background-color:#D81B2D!important;
}

它可以工作，但不能

因此，问题显然在于焦点，它会起作用，但一旦你进入下一个领域，你就会失去焦点，用户会觉得他们失去了选择

如果有人有一个JQ或Css解决方案，因为我无法编辑实际生成的单选按钮，那么他们会在插件上抛出一个循环

.frm\u收音机：聚焦在{
背景色：#D81B2D！重要；
}
.frm_style_-style.带有frm_style.frm_无线电标签，
.frm\u style\u-style.with\u frm\u style.frm\u复选框
标签：活动{
背景色：#D81B2D！重要；
}
.frm_无线电标签：激活{
背景色：#D81B2D！重要；
}
.frm_收音机：悬停{
背景色：#D81B2D！重要；
}
.frm_无线电标签：已访问{
背景色：#D81B2D！重要；
}
.frm_收音机：链接{
背景色：#D81B2D！重要；
}
.frm_收音机：-moz focus inner{
背景色：#D81B2D！重要；
大纲：无！重要；
}
输入[类型=无线电]{
不透明度：0！重要；
宽度：0px！重要；
高度：0px！重要；
保证金：0px！重要；
}

网页设计及；
发展

当您使用javascript单击一个类时，您可以添加和删除它。这也使得CSS更加简单

为了演示，我简化了HTML

//获取所有RadioBox
const radioBoxes=document.querySelectorAll（“.frm_radio input[type='radio']”）；
//突出显示：frm_电台分部
常量highLightRadioBox=（radioBox）=>{
//取消选择所有RadioBox
RadioBox.forEach（（框）=>{
getParentFrmRadio（box）.classList.remove（“活动”）；
});
//选择当前radioBox
getParentFrmRadio（radioBox）.classList.add（“活动”）；
};
//获取要高亮显示的父元素
/*
*radioBox.parentNode是您的标签
*radioBox.parentNode.parentNode是您的.frm\u无线电分区
*/
const getParentFrmRadio=（radioBox）=>radioBox.parentNode.parentNode；
//将更改事件添加到所有RadioBox
radioBox.forEach（（radioBox）=>{
radioBox.addEventListener（“更改”，（）=>highLightRadioBox（radioBox））；
});
.active{
背景色：#D81B2D！重要；
大纲：无！重要；
}
标签{
光标：指针；
}
输入[类型=无线电]{
不透明度：0！重要；
宽度：0！重要；
高度：0！重要；
边距：0！重要；
}
.frm_收音机{
填充物：5px；
}

网页设计
别的
我做了一个片段。请更新它以表示感谢you@mplungjan更新了访问的代码片段是为了linksWorks很好只是一个小问题它的
Div是需要激活的元素，所以我去说了getElementbyClassName（“frm_radio”）但出于某种原因，它将活动类附加到标签上，而不是div和id。如果我选择了一个新类，则需要它来删除以前选择的类。您可以演示一下吗？如果你愿意的话，你可以做一个测试。去联系我们。你会看到我所说的mean@Someguy我改变了我的榜样。现在，它仅在选定项目时更改。通过这种方式，您可以单击标签，然后它将更新活动状态。这可能是因为您的标签没有覆盖整个
.frm\u radio
div，但可以通过CSS轻松更改