How can I select multiple buttons without JavaScript?-CodePudding

I have 5 true/false statements and need to have 5 buttons selected separately as answers. The text will be a statement and the user should choose whether it is true or false in all 5 questions. The problem is only one button gets selected and I need to fix this with only using HTML and CSS without JS The code is:

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>

CodePudding user response：

You're changing the button appearance based on the ":focus" state. So when focus shifts to another button (due to clicking), focus is lost.

I assume after all the questions are answered you're going to want to submit a form. Buttons alone won't work for this - you need radio buttons to be able to store the state of the button. Fortunately, it's pretty straightforward to make radios look like buttons.

CodePudding user response：

The best solution is to use radio-buttons, styled as buttons:

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>

CodePudding user response：

I'm not particularly experienced myself, but I'm not sure if will get you the functionality you want without Javascript. I know you could get this working with <input type = "radio"> (info on how to group radio buttons here). Styling them is a bit of a pain, though.