有没有办法在JavaScript中更改所选单选按钮的颜色？

我有一组单选按钮和一个提交按钮。当我单击提交按钮时，会显示一条消息，告诉我单击了哪个单选按钮。我现在要做的是更改所选单选按钮的颜色，我如何才能做到这一点？我尝试了很多事情都没有成功。这是密码

功能选择按钮（）{
const optionContainer=document.queryselectoral（“.one”）；
对于（变量i=0；i

男性

女性

其他

提交

您可以将单选按钮包装到

div

中，然后在选中时应用CSS类。然后，在CSS中，您可以定义必要的样式

功能选择按钮（）{
const optionContainer=document.queryselectoral（“.one”）；
对于（变量i=0；i

。已选定{
颜色：红色；
}

男性
女性
其他
提交

您可以根据需要自定义单选按钮的样式。收音机上的直接样式设置不起作用

下面是一个例子

您还没有为所选的

类提供样式。请添加该选项以查看样式更改

这是你需要的款式

.container.selected  input:checked ~ .checkmark {
  background-color: red;
}


功能选择按钮（）{
const optionContainer=document.queryselectoral（“.one”）；
对于（变量i=0；i

/*容器*/
.集装箱{
显示：块；
位置：相对位置；
左侧填充：35px；
边缘底部：12px；
光标：指针；
字体大小：22px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
/*隐藏浏览器的默认单选按钮*/
.容器输入{
位置：绝对位置；
不透明度：0；
光标：指针；
}
/*创建自定义单选按钮*/
.对号{
位置：绝对位置；
排名：0；
左：0；
高度：25px；
宽度：25px；
背景色：#eee；
边界半径：50%；
}
/*在鼠标悬停时，添加灰色背景色*/
.container:悬停输入~。选中标记{
背景色：#ccc；
}
/*选中单选按钮后，添加蓝色背景*/
.container输入：选中~.checkmark{
背景色：#2196f3；
}
/*创建指示器（点/圆-未选中时隐藏）*/
.勾选：之后{
内容：“；
位置：绝对位置；
显示：无；
}
/*选中时显示指示器（点/圆）*/
.容器输入：选中~。选中标记：之后{
显示：块；
}
/*设置指示器的样式（点/圆）*/
.容器。选中标记：之后{
顶部：9px；
左：9px；
宽度：8px；
高度：8px；
边界半径：50%；
背景：白色；
}
.container.selected输入：选中~。选中标记{
背景色：红色；
}
自定义单选按钮
一个
两个
三
四
提交
您可以将整个输入元素包含在一个范围内，并使用
父节点
更改完整单选按钮的颜色


功能选择按钮（）{
const optionContainer=document.queryselectoral（“.one”）；
对于（变量i=0；i

男性

女性

其他

提交
功能选择按钮（）{
const optionContainer=document.queryselectoral（“.one”）；
对于（变量i=0；i
将类添加到所选单选按钮。该类应该包含您想要的样式。设置某些控件元素的样式很棘手，请参见@Teemu callmewhateveryouwant查看下面的注释？@renatomanalli我看不到任何一个答案会改变单选按钮的颜色，这是一个问题…您的解决方案是最简单的。我希望围绕输入元素的div没有任何副作用。谢谢你，也谢谢回答这个问题的任何人。
 function selectedButton() {
        const optionContainer = document.querySelectorAll(".one");
        for (var i = 0; i < optionContainer.length; i++) {
            if (optionContainer[i].checked) {
                document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
                optionContainer[i].style.backgroundColor = "red";
            }
            else {
                optionContainer[i].style.backgroundColor = "";
            }
        }
    }