h5实现单选框未勾选

实现单选框未勾选状态的方法

在HTML5中，单选框（<input type="radio">）默认未勾选。若需确保初始状态为未勾选或动态控制，可通过以下方式实现：

初始未勾选状态

直接使用HTML标签，不添加checked属性即可：

<input type="radio" name="group1" id="option1">
<label for="option1">选项1</label>
<input type="radio" name="group1" id="option2">
<label for="option2">选项2</label>

动态取消勾选

通过JavaScript移除checked属性或设置为false：

document.getElementById("option1").checked = false;

重置表单

使用表单的reset()方法可重置所有单选框状态：

<form id="myForm">
  <input type="radio" name="group1" id="option1" checked>
  <input type="radio" name="group1" id="option2">
  <button type="button" onclick="document.getElementById('myForm').reset()">重置</button>
</form>

CSS样式增强

为未勾选状态添加视觉提示：

input[type="radio"]:not(:checked) + label {
  opacity: 0.7;
}

注意事项

• 同一组单选框需共享name属性以实现互斥。
• 若需默认选中某一项，仅对该项添加checked属性。
• 动态操作时确保DOM加载完成后再执行脚本（如监听DOMContentLoaded事件）。