h5实现单选框未勾选

实现未勾选状态的单选框

在HTML5中，单选框（radio button）默认未勾选。通过HTML和CSS可以轻松实现并自定义未勾选状态。

基础HTML实现

<input type="radio" name="gender" id="male">
<label for="male">Male</label>

<input type="radio" name="gender" id="female">
<label for="female">Female</label>

自定义未勾选样式 通过CSS修改默认外观：

input[type="radio"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #999;
  border-radius: 50%;
  outline: none;
  margin-right: 8px;
}

input[type="radio"]:checked {
  background-color: #007bff;
}

验证必选但未勾选的情况

对于表单验证场景，当需要确保用户必须选择某项时：

HTML5 required属性

<form>
  <input type="radio" name="color" id="red" required>
  <label for="red">Red</label>

  <input type="radio" name="color" id="blue">
  <label for="blue">Blue</label>

  <button type="submit">Submit</button>
</form>

JavaScript验证

document.querySelector('form').addEventListener('submit', function(e) {
  const radios = document.querySelectorAll('input[name="color"]');
  if (![...radios].some(radio => radio.checked)) {
    e.preventDefault();
    alert('Please select an option');
  }
});

重置为未勾选状态

通过JavaScript将已选中的单选框重置：

document.getElementById('resetBtn').addEventListener('click', function() {
  const radios = document.querySelectorAll('input[name="gender"]');
  radios.forEach(radio => radio.checked = false);
});

jQuery版本

$('#resetBtn').click(function() {
  $('input[name="gender"]').prop('checked', false);
});