如何通过点击包含单选框的<li>标签设置radiobox为选中状态

核心思路 #

给<li>绑定点击事件，触发时找到其中的单选框元素，将其checked属性设为true，同时处理点击单选框本身的场景，避免重复操作冲突。

代码实现 #

HTML结构示例

<ul>
  <li class="radio-item">
    <input type="radio" name="option" id="option1" value="1">
    <label for="option1">选项1</label>
  </li>
  <li class="radio-item">
    <input type="radio" name="option" id="option2" value="2">
    <label for="option2">选项2</label>
  </li>
</ul>

CSS（优化点击体验，可选）

.radio-item {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
}
.radio-item:hover {
  background-color: #f0f0f0;
}

JavaScript实现

const radioItems = document.querySelectorAll('.radio-item');

radioItems.forEach(item => {
  item.addEventListener('click', function(e) {
    const radio = this.querySelector('input[type="radio"]');
    if (radio && e.target !== radio) {
      radio.checked = true;
    }
  });
});

说明 #

• 点击<li>时自动选中内部单选框，同时保留原生单选框的点击行为不受干扰。
• 通过CSS hover样式强化可点击提示，提升用户感知。

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