设计调查表答案

【问题标题】：Design survey form设计调查表
【发布时间】：2023-01-17 18:16:34
【问题描述】：

我想设计一个简单的调查表。只有一个问题。我决定使用输入复选框。虽然我想了很长时间使用单选按钮。你只能选择一个答案。

我的目标

是在调查容器的整个宽度上有一个可点击的按钮。所以没有选择检查。如果被选中，我会将一个选定的类添加到选择中。

我的问题

我怎样才能在不失去选择功能的情况下实现我想要的东西？实际上，这个理论对我来说已经足够了。

这是我的代码：

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>

设计我所期望的

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

我的尝试我在 Stackoverflow 上的另一个问题中找到了这个 sn-p。现在你只需要删除复选框（有黑客的那个）。那我就到了目的地了！？

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>

【问题讨论】：

你能为你分享的 HTML 提供 CSS 吗？
@Dave111 到目前为止我还没有写任何 CSS，因为我不知道怎么写？这就是为什么我在这里问。我的猜测是我必须隐藏输入字段并使用标签。我已经添加了一个 coden-p 它应该是什么样子。但正如我所说，我不知道如何实施它。

标签： javascript html css

【解决方案1】：

将 label 与 input 相关联，但将输入放在其中。
将 label 设置为一个块（默认为 width: auto），以便它填充其容器的宽度。

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

虽然我想了很长时间使用单选按钮。你只能选择一个答案。

那么使用复选框的决定就是错误的。使用单选按钮。这就是复选框和单选按钮之间的区别。

【讨论】：

谢谢昆汀的回答和你的时间。再次感谢您建议使用收音机。我真的考虑了一段时间并决定这样做，因为我也希望能够撤销我的投票。但这也适用于额外的重置按钮。
现在怎么能去掉钩子呢？然后我的问题就会得到回答，可以这么说。但是，我也在看无线电变体。我希望它会相似，我可以用同样的方式删除选择圈。
好的，我认为使用 input { display: none; } 很简单，对吧？

【解决方案2】：

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

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

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

【讨论】：