Chọn radio button mặc định trong JavaScript

Để radio button được chọn mặc định: set property checked = true (JS) hoặc attribute checked (HTML).

Cách 1: HTML Attribute (Khuyên dùng cho static)

<form>
  <input type="radio" name="gender" value="male" checked> Male
  <input type="radio" name="gender" value="female"> Female
  <input type="radio" name="gender" value="other"> Other
</form>

Cách 2: JavaScript (Dynamic)

<form id="genderForm">
  <input type="radio" id="male" name="gender" value="male"> Male
  <input type="radio" id="female" name="gender" value="female"> Female
  <input type="radio" id="other" name="gender" value="other"> Other
</form>

<script>
  // Cách 1: Theo ID
  document.getElementById('male').checked = true;

  // Cách 2: Query selector
  document.querySelector('input[name="gender"][value="female"]').checked = true;

  // Cách 3: Form.elements collection
  document.getElementById('genderForm').elements.gender.value = 'other';
</script>

Lưu ý quan trọng

• Chỉ một radio trong cùng name group được checked tại một thời điểm — set true cho một sẽ tự bỏ chọn cái khác.
• checked là property (JS), checked attribute chỉ set initial state.
• Để lấy giá trị đã chọn: document.querySelector('input[name="gender"]:checked').value.

Ví dụ hoàn chỉnh: Khôi phục lựa chọn từ localStorage

<script>
  const form = document.getElementById('genderForm');
  const saved = localStorage.getItem('genderChoice');
  
  if (saved) {
    // Set checked dựa trên value đã lưu
    form.elements.gender.value = saved;
  }
  
  // Lưu khi thay đổi
  form.addEventListener('change', (e) => {
    if (e.target.name === 'gender') {
      localStorage.setItem('genderChoice', e.target.value);
    }
  });
</script>

Accessibility (a11y)

• Luôn wrap radio trong <fieldset> + <legend>.
• Mỗi <input> có <label for="id"> liên kết.
• Dùng required trên một input trong group nếu bắt buộc chọn.

<fieldset>
  <legend>Giới tính</legend>
  <label><input type="radio" name="gender" value="male"> Nam</label>
  <label><input type="radio" name="gender" value="female"> Nữ</label>
  <label><input type="radio" name="gender" value="other"> Khác</label>
</fieldset>