Design survey form

Question

I would like to design a simple survey form. With only one question. I have decided to use an input checkbox. Although I thought about using a radio button for a long time. You can only choose one answer.

My goal

Is to have a clickable button across the entire width of the survey container. So without the selection check. If selected I would add a selected class to the selection.

My question

How can I implement what I want without losing the functionality of the selection? Actually, the theory is enough for me.

Here is my code:

function onlyOne(checkbox) {
  const checkboxes = document.getElementsByName('check');
  console.log('check clicked', checkbox)
  checkboxes.forEach((item) => {
    if (item !== checkbox) {
      item.checked = false;
    }
  })
}

<div id="poll-id-1">
  <h2>Poll</h2>
  <p>Question?</p>
  <div class="poll__div_vote-active">
    <div>
      <label>Yes</label>
      <input type="checkbox" name="check" onclick="onlyOne(this)" value="0">
    </div>
    <div>
      <label>No</label>
      <input type="checkbox" name="check" onclick="onlyOne(this)" value="1">
    </div>
  </div>
  <button class="poll__button_show-vote-results">Show Results</button>
  <div class="poll__div_vote-result">
    <div class="poll">
      <div class="poll-results"></div>
    </div>
  </div>
</div>

Desgin what i expected

.a {
  background: gray;
  border:1px solid black;
  margin-bottom:5px;
  padding:10px;
  cursor: pointer;
}

<div class="poll">
  <div class="a">Yes</div>
  <div class="a">No</div>
</div>

My try I found this snippet in an other question here on Stackoverflow. Now you would only have to remove the checkbox (the one with the hack). then i would be at my destination!?

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}

<label><input type="checkbox" />Yes</label>
<label><input type="checkbox" />No</label>

Answer 1

[type="radio"] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

label {
  color: white;
  background: grey;
  display: block;
  cursor: pointer;
  padding: 1em;
  
  border:1px solid black;
  margin-bottom:5px;
  padding:10px;
}

[type="radio"]:checked+label {
  background: blue;
}

[type="radio"]:hover+label {
  background: #eee;
  color: #333;
}

<input type="radio" name="check" value="0" id="yes">
<label for="yes">Yes</label>

<input type="radio" name="check" value="1" id="no">
<label for="no">No</label>

To use checkboxes instead of radio inputs for some reason

[type="checkbox"] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

label {
  color: white;
  background: grey;
  display: block;
  cursor: pointer;
  padding: 1em;
  
  border:1px solid black;
  margin-bottom:5px;
  padding:10px;
}

[type="checkbox"]:checked+label {
  background: blue;
}

[type="checkbox"]:hover+label {
  background: #eee;
  color: #333;
}

<input type="checkbox" name="check" value="0" id="yes">
<label for="yes">Yes</label>

<input type="checkbox" name="check" value="1" id="no">
<label for="no">No</label>

Answer 2

• Associate the label with the input but putting the input inside it.
• Style the label to be a block (it is width: auto by default) so it fills the width of its container.

.a {
  display: block;
  background: gray;
  border:1px solid black;
  margin-bottom:5px;
  padding:10px;
  cursor: pointer;
}

<div class="poll">
  <label class="a"><input type="checkbox" /> Yes</div>
  <label class="a"><input type="checkbox" /> No</div>
</div>

Although I thought about using a radio button for a long time. You can only choose one answer.

Then the decision to use a checkbox is simply wrong. Use a radio button. That's the difference between checkboxes and radio buttons.