单选检查验证失败

<form id="myForm">
  <label>
    <input type="radio" name="gender" value="male"> Male
  </label>
  <label>
    <input type="radio" name="gender" value="female"> Female
  </label>
  <button type="submit">Submit</button>
</form>
<div id="error-message" style="color: red;"></div>

document.getElementById('myForm').addEventListener('submit', function(event) {
  const genderRadios = document.getElementsByName('gender');
  let isChecked = false;

  for (let i = 0; i < genderRadios.length; i++) {
    if (genderRadios[i].checked) {
      isChecked = true;
      break;
    }
  }

  if (!isChecked) {
    event.preventDefault(); // 阻止表单提交
    document.getElementById('error-message').textContent = 'Please select your gender.';
  } else {
    document.getElementById('error-message').textContent = ''; // 清除错误信息
  }
});