如何在使用JavaScript选择无线电输入时更改div的颜色

目前我遇到的问题是，当选择一个输入时，所有div元素都会永久性地变为红色。我只希望所选输入的div变为红色。此外，如果选择了另一个输入，我希望前一个输入返回其原始颜色

这就是我到目前为止所做的， 代码笔：

函数chgCol（）{
var输入=[]；
var input=document.getElementsByClassName（“Amt_Int”）；
var div=[]；
var div=document.getElementsByClassName（“金额”）；
对于（i=0；i

.DoF\u Amt、.Pel\u Info、.Pat\u Info{
背景色：白色；
左缘：20%；
保证金权利：20%；
颜色：蓝色；
利润底部：5%；
填充：5%
}
Amt_Cor先生{
显示器：flex；
柔性包装：包装；
对齐项目：居中；
证明内容：中心；
}
A.金额{
显示器：flex；
证明内容：中心；
对齐项目：居中；
边框：.3vmin实心rgba（0,0255,1）；
边界半径：50%；
垂直对齐：中间对齐；
填充：2%；
高度：10分钟；
宽度：10vmin；
字体大小：4vmin；
利润率：2%；
}
.金额{
位置：绝对位置；
剪辑：rect（0,0,0,0）；
边界：0；
}

捐款金額
$1
$25
$50
$75
风俗
与贝宝一起捐赠
用卡片捐赠

如果稍微重新构造DOM并将标签用作气泡，而不是它们的父级

div

s，则可以使用纯CSS实现这一点。您可以利用

：选中的

选择器以及

+

（相邻同级）选择器

以下是我的看法：

/*重要的东西：*/
标签{
边框：.1rem实心rgba（0,0,255,1）；
颜色：rgba（0,0,255,1）；
}
输入：选中+标签{
边框：.1rem实心rgba（255,0,0,1）；
颜色：rgba（255,0,0,1）；
}
/*其余的：*/
形式{
显示器：flex；
柔性包装：包装；
对齐项目：居中；
证明内容：中心；
}
标签{
光标：指针；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边界半径：50%；
垂直对齐：中间对齐；
高度：3雷姆；
宽度：3rem；
字号：1rem；
填充：0.5雷姆；
保证金：0.5雷姆；
}
输入{
位置：绝对位置；
剪辑：rect（0,0,0,0）；
边界：0；
}

$1
$5
$25
$50

如果稍微重新构造DOM并将标签用作气泡，而不是它们的父级

div

s，则可以使用纯CSS实现这一点。您可以利用

：选中的

选择器以及

+

（相邻同级）选择器

以下是我的看法：

/*重要的东西：*/
标签{
边框：.1rem实心rgba（0,0,255,1）；
颜色：rgba（0,0,255,1）；
}
输入：选中+标签{
边框：.1rem实心rgba（255,0,0,1）；
颜色：rgba（255,0,0,1）；
}
/*其余的：*/
形式{
显示器：flex；
柔性包装：包装；
对齐项目：居中；
证明内容：中心；
}
标签{
光标：指针；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边界半径：50%；
垂直对齐：中间对齐；
高度：3雷姆；
宽度：3rem；
字号：1rem；
填充：0.5雷姆；
保证金：0.5雷姆；
}
输入{
位置：绝对位置；
剪辑：rect（0,0,0,0）；
边界：0；
}

$1
$5
$25
$50

通过将

onclick=“chgCol（）”

更改为

onclick=“chgCol（{target}）”，将事件目标传递给单击处理程序。然后你可以做出更动态的反应

更好的解决方案是将事件委托给父元素（
）。例如：


const[clickTarget]=document.getElementsByClassName（'Amt\u Cor'）；
clickTarget.onclick=（{target}）=>{
如果（！target.classList.contains（'Amt_Lal'））返回；
const currentlyHighlighted=document.querySelector（'.highlight'）；
if（currentlyHighlighted）currentlyHighlighted.classList.remove（'highlight'）；
target.classList.add（'highlight'）；
target.firstElementChild.checked=true；
console.log（document.querySelector（'[name=“amount”]：checked'）.value）；
};
.DoF\u Amt、.Pel\u Info、.Pat\u Info{
背景色：白色；
左缘：20%；
保证金权利：20%；
颜色：蓝色；
利润底部：5%；
填充：5%
}
Amt_Cor先生{
显示器：flex；
柔性包装：包装；
对齐项目：居中；
证明内容：中心；
}
A.金额{
显示器：flex；
证明内容：中心；
对齐项目：居中；
边框：.3vmin实心rgba（0,0255,1）；
边界半径：50%；
垂直对齐：中间对齐；
填充：2%；
高度：10分钟；
宽度：10vmin；
字体大小：4vmin；
利润率：2%；
}
.Amt_Lal：：之后{
内容：“；
位置：绝对位置；
宽度：15vmin；
高度：15分钟；
边界半径：50%；
}
.金额{
位置：绝对位置；
剪辑：rect（0,0,0,0）；
边界：0；
}
.亮点{
边框颜色：红色；
颜色：红色；
}

$1
$25
$50
$75
风俗
通过将
onclick=“chgCol（）”
更改为
onclick=“chgCol（{target}）”，将事件目标传递给单击处理程序。然后你可以做出更动态的反应

更好的解决方案是将事件委托给父元素（
）。例如：


const[clickTarget]=document.getElementsByClassName（'Amt\u Cor'）；
clickTarget.onclick=（{target}）=>{