Javascript 在一组HTML单选按钮中，如何突出显示正确/错误的选择

有三个HTML单选按钮，ID分别为

1

、

2

、

3

，旁边还有一些文本。“正确”答案是

2

。当用户选择

2

时，单选按钮及其文本应以绿色突出显示。否则，（选项

1

和

3

）应以红色突出显示。如何使用HTML、CSS和/或JavaScript实现这种行为

这是我到目前为止尝试过的（我突出显示的不是单选按钮而是图像的边框）

HTML:

<input type="radio" name="group1" id="1" class="input-hidden"/>
<label for="1">
  <img src="1.jpg"/>
</label>
<input type="radio" name="group1" id="2" class="input-hidden" />
<label for="2">
  <img src="2.jpg"/>
</label>

---

您可以使用类型的第n个选择器来标识第n个元素。注意：要使此选择器正常工作，您必须对输入进行分组，因为它是同一父级中类型的第n个“读取更多”

更新 有评论说，只有当所有答案都是2时，这才有效。这是正确的。你需要针对每个问题分别给出答案

<div id="q1">
  <!-- inputs -->
</div>

<div id="q2">
  <!-- inputs -->
</div>

<div id="q3">
  <!-- inputs -->
</div>

易于组合为：

#q1 input[type=radio]:nth-of-type(1):checked + label > img,
#q2 input[type=radio]:nth-of-type(4):checked + label > img,
#q3 input[type=radio]:nth-of-type(3):checked + label > img {
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px #090;
}

---

input[type=radio]：选中+标签>img{
边框：1px实心#fff；
长方体阴影：0 3px 3px红色；
}
#q1输入[类型=无线电]：第n个类型（1）：选中+标签>img，
#q2输入[类型=无线电]：第n个类型（2）：选中+标签>img，
#q3输入[类型=无线电]：第n个类型（3）：选中+标签>img{
边框：1px实心#fff；
盒影：0 0 3px 3px#090；
}

第一个是正确的：
第二个是正确的：
最后一个是正确的：

您可以将类添加到img中，以区分错误答案和正确答案

---

input[type=radio]：选中+标签>。回答错误{
边框：1px实心#990000；
盒影：0 0 3px 3px#990000；
}
输入[类型=收音机]：选中+标签>。回答正确{
边框：1px实心#090；
盒影：0 0 3px 3px#090；
}

到目前为止，您尝试了什么？发布关于您尝试了什么的代码，以便其他人可以指导您，而不是直接要求解决方案，这一直是一个很好的做法。

input[type=radio]：checked+label>img

将当前选择的单选按钮设置为所需的颜色，但我不能有两种这样的颜色正确，这就是OP的情况。他/她必须创建所有用例。我会更新答案。这看起来太复杂了。这是一条路要走。

<div id="q1">
  <!-- inputs -->
</div>

<div id="q2">
  <!-- inputs -->
</div>

<div id="q3">
  <!-- inputs -->
</div>

/* First answer for Q1 */
#q1 input[type=radio]:nth-of-type(1):checked + label > img {
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px #090;
}

/* Fourth answer for Q2 */
#q2 input[type=radio]:nth-of-type(4):checked + label > img {
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px #090;
}

/* Third answer for Q3 */
#q3 input[type=radio]:nth-of-type(3):checked + label > img {
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px #090;
}

#q1 input[type=radio]:nth-of-type(1):checked + label > img,
#q2 input[type=radio]:nth-of-type(4):checked + label > img,
#q3 input[type=radio]:nth-of-type(3):checked + label > img {
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px #090;
}