如何实现全宽可点击单选式Checkbox问卷选项并保留选择功能？

核心原理 #

借助<label>和<input>的绑定特性（点击<label>会同步触发对应<input>的状态切换），隐藏原生复选框，将<label>设计成按钮样式，通过CSS伪类或JS控制类名实现选中状态的样式变化，同时保留你的单选逻辑。

分步实现 #

1. 调整HTML结构

把复选框嵌套进<label>内部，确保点击整个选项区域都能触发选择；给每个选项容器统一类名，方便样式和JS操作：

<div id="poll-id-1">
  <h2>Poll</h2>
  <p>Question?</p>
  <div class="poll__div_vote-active">
    <div class="poll-option">
      <label>
        <input type="checkbox" name="check" onclick="onlyOne(this)" value="0">
        Yes
      </label>
    </div>
    <div class="poll-option">
      <label>
        <input type="checkbox" name="check" onclick="onlyOne(this)" value="1">
        No
      </label>
    </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>

2. CSS样式处理

• 隐藏原生复选框（用opacity:0+绝对定位，避免影响布局）
• 给<label>设置全宽按钮样式
• 利用:checked伪类或JS添加的selected类控制选中状态：

/* 隐藏原生复选框 */
.poll-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* 按钮样式的选项 */
.poll-option label {
  display: block;
  width: 100%;
  background: gray;
  border: 1px solid black;
  margin-bottom: 5px;
  padding: 10px;
  cursor: pointer;
  transition: background 0.2s;
}

/* 鼠标悬停效果 */
.poll-option label:hover {
  background: #ddd;
}

/* 选中状态样式（二选一即可） */
/* 方式1：纯CSS伪类实现，需将文本用<span>包裹，如<input><span>Yes</span> */
.poll-option input[type="checkbox"]:checked + span {
  background: #555;
  color: white;
  border-color: #222;
}
/* 方式2：配合JS添加的selected类 */
.poll-option.selected label {
  background: #555;
  color: white;
  border-color: #222;
}

3. 优化JS逻辑

保留单选逻辑的同时，添加类名控制选中状态：

function onlyOne(checkbox) {
  const checkboxes = document.getElementsByName('check');
  // 先移除所有选项的selected类
  document.querySelectorAll('.poll-option').forEach(item => {
    item.classList.remove('selected');
  });
  // 遍历复选框，取消其他选中状态
  checkboxes.forEach((item) => {
    if (item !== checkbox) {
      item.checked = false;
    } else {
      // 给当前选中的选项容器添加selected类
      if (item.checked) {
        item.closest('.poll-option').classList.add('selected');
      }
    }
  });
}

两种选中样式实现方式选其一即可： #

• 纯CSS方式：无需修改JS，只需把label内的文本用<span>包裹，靠:checked伪类触发样式。
• JS控制类名：更灵活，适合复杂样式或交互场景。

内容的提问来源于stack exchange，提问作者Max Pattern