如何在没有 JavaScript 的情况下选择多个按钮？答案

【问题标题】：How can I select multiple buttons without JavaScript?如何在没有 JavaScript 的情况下选择多个按钮？
【发布时间】：2021-12-19 19:22:18
【问题描述】：

我有 5 个真/假陈述，需要分别选择 5 个按钮作为答案。文本将是一个陈述，用户应该在所有 5 个问题中选择它是对还是错。问题是只有一个按钮被选中，我需要解决这个问题，只使用 HTML 和 CSS 而没有 JS 代码是：

button {
  background-color: #FFFFFF;
  border: 2px solid #222222;
  border-radius: 8px;
  box-sizing: border-box;
  color: #222222;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  padding: 5px 18px;
  position: relative;
  text-align: center;
  touch-action: manipulation;
  transition: box-shadow .2s,-ms-transform .1s,-webkit-transform .1s,transform .1s;
}

button:active {
  background-color: #F7F7F7;
  border-color: #000000;
  transform: scale(.90);
}

.t1:focus, .t2:focus, .t3:focus, .t4:focus, .t5:focus {
    background-color: green;
}
.f1:focus, .f2:focus, .f3:focus, .f4:focus, .f5:focus {
    background-color: red;
}

<!DOCTYPE html>
<html lang="fr">
  <head>
    <link rel="stylesheet" href="json.css">
  </head>

  <body>
    <p>Text</p>
    <button type="button" name = "q1" id="q1t" class="t1" value="1">True</button>
    <button type="button" name = "q1" id="q1f" class="f1" value="0">False</button>

    <p>Text</p>
    <button type="button" name = "q2" id="q2t" class="t2" value="1">True</button>
    <button type="button" name = "q2" id="q2f" class="f2" value="0">False</button>

    <p>Text</p>
    <button type="button" name = "q3" id="q3t" class="t3" value="1">True</button>
    <button type="button" name = "q3" id="q3f" class="f3" value="0">False</button>

    <p>Text</p>
    <button type="button" name = "q4" id="q4t" class="t4" value="1">True</button>
    <button type="button" name = "q4" id="q4f" class="f4" value="0">False</button>

    <p>Text</p>
    <button type="button" name = "q5" id="q5t" class="t5" value="1">True</button>
    <button type="button" name = "q5" id="q5f" class="f5" value="0">False</button>
  </body>
</html>

【问题讨论】：

按钮没有选中状态。也许您应该使用无线电输入组。
Protip：transition 或 transform 不需要供应商前缀。

标签： html css class button

【解决方案1】：

您正在根据 ":focus" 状态更改按钮外观。因此，当焦点转移到另一个按钮（由于单击）时，焦点会丢失。

我假设在回答完所有问题后，您会想要提交表单。单独的按钮对此不起作用 - 您需要单选按钮才能存储按钮的状态。幸运的是，让收音机看起来像按钮非常简单。

【讨论】：

【解决方案2】：

最好的解决方案是使用单选按钮，样式为按钮：

input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

label {
    display: inline-block;
    background-color: #ddd;
    padding: 10px 20px;
    font-family: sans-serif, Arial;
    font-size: 16px;
    border: 2px solid #444;
    border-radius: 4px;
}
label:hover {
  background-color: #dfd;
}

input[type="radio"]:focus + label {
    border: 2px dashed #444;
}

input[type="radio"]:checked + label {
    background-color: #bfb;
    border-color: #4c4;
}

<p>Text</p>
    <input type="radio" name="test1" id="test11">
    <label for="test11">True</label>
    <input type="radio" name="test1" id="test12">
    <label for="test12">False</label>

    <p>Text</p>
    <input type="radio" name="test2" id="test21">
    <label for="test21">True</label>
    <input type="radio" name="test2" id="test22">
    <label for="test22">False</label>

【讨论】：

【解决方案3】：

我自己并不是特别有经验，但我不确定是否可以在没有 Javascript 的情况下为您提供所需的功能。我知道您可以使用<input type = "radio"> 来完成这项工作（有关如何对单选按钮here 进行分组的信息）。为它们设置样式is a bit of a pain, though。

【讨论】：