时间戳

首页 > 解决方案 > 如何在没有 JavaScript 的情况下选择多个按钮？

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

问题描述

我有 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>

标签： htmlcssclassbutton

解决方案

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

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>

推荐阅读