Question

有三个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>

CSS：

input[type=radio]:checked + label>img {
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px #090;
}

Answer 1

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

allMatrices[1:3]
[[1]]
     [,1] [,2] [,3] [,4] [,5]
[1,]    1    1    0    0    0
[2,]    1    1    0    0    0
[3,]    1    1    0    0    0
[4,]    1    1    0    0    0
[5,]    1    1    0    0    0

[[2]]
     [,1] [,2] [,3] [,4] [,5]
[1,]    1    1    0    0    0
[2,]    1    1    0    0    0
[3,]    1    1    0    0    0
[4,]    1    1    0    0    0
[5,]    1    0    1    0    0

[[3]]
     [,1] [,2] [,3] [,4] [,5]
[1,]    1    1    0    0    0
[2,]    1    1    0    0    0
[3,]    1    1    0    0    0
[4,]    1    1    0    0    0
[5,]    1    0    0    1    0


len <- length(allMatrices)
len
[1] 100000

allMatrices[(len - 2):len]
[[1]]
     [,1] [,2] [,3] [,4] [,5]
[1,]    0    0    0    1    1
[2,]    0    0    0    1    1
[3,]    0    0    0    1    1
[4,]    0    0    0    1    1
[5,]    0    0    1    1    0

[[2]]
     [,1] [,2] [,3] [,4] [,5]
[1,]    0    0    0    1    1
[2,]    0    0    0    1    1
[3,]    0    0    0    1    1
[4,]    0    0    0    1    1
[5,]    0    0    1    0    1

[[3]]
     [,1] [,2] [,3] [,4] [,5]
[1,]    0    0    0    1    1
[2,]    0    0    0    1    1
[3,]    0    0    0    1    1
[4,]    0    0    0    1    1
[5,]    0    0    0    1    1

input[type=radio]:checked+label>.wrongAnswer {
  border: 1px solid #990000;
  box-shadow: 0 0 3px 3px #990000;
}

input[type=radio]:checked+label>.correctAnswer {
  border: 1px solid #090;
  box-shadow: 0 0 3px 3px #090;
}

Answer 2

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

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

更新

一条评论说，这仅在所有答案均为2的情况下才有效。这是正确的。您需要分别针对每个问题的答案。

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

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

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

使用CSS：

/* 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;
}

input[type=radio]:checked + label > img {
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px red;
}

#q1 input[type=radio]:nth-of-type(1):checked + label > img,
#q2 input[type=radio]:nth-of-type(2):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;
}

<div id="q1">
  First one is correct:
  
  <input type="radio" name="group1" id="q1-1" class="input-hidden"/>
  <label for="q1-1">
    <img src="1.jpg"/>
  </label>
  <input type="radio" name="group1" id="q1-2" class="input-hidden" />
  <label for="q1-2">
    <img src="2.jpg"/>
  </label>
  <input type="radio" name="group1" id="q1-3" class="input-hidden" />
  <label for="q1-3">
    <img src="3.jpg"/>
  </label>
 </div>
 
 <div id="q2">
  Second one is correct:
  
  <input type="radio" name="group2" id="q2-1" class="input-hidden"/>
  <label for="q2-1">
    <img src="1.jpg"/>
  </label>
  <input type="radio" name="group2" id="q2-2" class="input-hidden" />
  <label for="q2-2">
    <img src="2.jpg"/>
  </label>
  <input type="radio" name="group2" id="q2-3" class="input-hidden" />
  <label for="q2-3">
    <img src="3.jpg"/>
  </label>
 </div>
 
  <div id="q3">
  Last one is correct:
  
  <input type="radio" name="group3" id="q3-1" class="input-hidden"/>
  <label for="q3-1">
    <img src="1.jpg"/>
  </label>
  <input type="radio" name="group3" id="q3-2" class="input-hidden" />
  <label for="q3-2">
    <img src="2.jpg"/>
  </label>
  <input type="radio" name="group3" id="q3-3" class="input-hidden" />
  <label for="q3-3">
    <img src="3.jpg"/>
  </label>
 </div>

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

2 个答案:

更新