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 >
    <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 >Show Results</button>
  <div >
    <div >
      <div ></div>
    </div>
  </div>
</div>

Desgin what i expected

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

<div >
  <div >Yes</div>
  <div >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>

CodePudding user response：

[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>

CodePudding user response：

• 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 >
  <label ><input type="checkbox" /> Yes</div>
  <label ><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.