javascript - 如何在网页上进行多选题测试？

Question

标题 我正在尝试制作我的第一个网站，这将是一个多选题测试，如果这个问题太明显了，请原谅。

在调查/测试期间，选择他认为正确的选项，即带有文本/公式的按钮。

我想突出显示一个用户选择的内容，如果此人重新考虑并改变主意 - 他可以这样做，之前突出显示的按钮将不突出显示，新答案将突出显示。我试图用图片来表示我希望获得的东西。

现在我正在考虑使用 html + css 来完成这项工作，但是或者我做错了，或者 html + css 不足以完成这项工作，或者它太难了，使用 javascript 更容易(到目前为止我没有使用 javascript，我只知道它用于繁重的逻辑/在需要在客户端完成一些 super 工作的网站中)。我正在考虑通过结合 html + css，通过发帖或获取请求来做所有事情。我想到这种组合的原因 - 我尽量不要让一切过于复杂，而不是“用大炮射苍蝇”。这是代码，我试着从 :

<button type="submit" value="res_1" > option 1 </button >

css 代码在哪里(不是 hole css，但我想使用事件/目标“伪类”的想法很明确):

button {
    border: 2px solid gray;
}
button:active {
    border: 2px solid green;
}
button:target {
    border: 2px solid red;
}

问题:如果我上面所说的解决问题的想法是错误的，你能解释一下为什么吗？在这种情况下，最佳做法是什么？应该看什么方向，出现问题后应该注意哪些？

Answer 1

你并不真的需要 JavaScript，你可以用隐藏的单选按钮来完成:

.question {
  margin: 20px;
}

.question input[type="radio"] {
  display: none;
}

.question span {
  
  box-sizing: border-box;
  display: inline-block;
  height: 40px;
  padding: 10px;
  line-height: 20px;
  border-radius: 10px;
  
  font-weight: bold;
  border: 2px solid black;

  cursor: pointer;
}

.question input[type="radio"]:checked + span {
 
  /* The selected state of the answer */
  
  background-color: #72EB72;
}

<form>
  <div class="question">
    <header>What's a women called whom lost 90% of her intelligence?</header>
    
    <label><input type="radio" name="question_1" value="a" checked><span>Apple</span></label>
    <label><input type="radio" name="question_1" value="b"><span>Widow</span></label>
    <label><input type="radio" name="question_1" value="c"><span>Nurse</span></label>
  </div>
  
  <div class="question">
    <header>How do you call a man who lost 90% of his intelligence?</header>
    
    <label><input type="radio" name="question_2" value="a"><span>Blue</span></label>
    <label><input type="radio" name="question_2" value="b"><span>Plumber</span></label>
    <label><input type="radio" name="question_2" value="c"><span>Divorced</span></label>
  </div>
</form>