JavaScript - ラジオボタンの情報を取得する

ラジオボタンの情報の取得

/* HTML側 */
<form id="radioGroup">
  <label for="radioA">
    <input type="radio" id="radioA" name="group1" value="A"/> ラジオボタンA
  </label>

  <label for="radioB">
    <input type="radio" id="radioB" name="group1" value="B" checked/> ラジオボタンB
  </label>
  
  <label for="radioC">
    <input type="radio" id="radioC" name="group2" value="C"/> ラジオボタンC
  </label>

  <label for="radioD">
    <input type="radio" id="radioD" name="group2" value="D" checked/> ラジオボタンD
  </label>
</form>

/* JavaScript 側 */
var radioGroup = document.getElementById("radioGroup");

console.log(radioGroup.group1.value); // B
console.log(radioGroup.group2.value); // D
ラジオボタンの情報の取得

ラジオボタンの変更の検知

/* HTML側 */
<form id="radioGroup">
  <label for="radioA">
    <input type="radio" id="radioA" name="group1" value="A"/> ラジオボタンA
  </label>

  <label for="radioB">
    <input type="radio" id="radioB" name="group1" value="B" checked/> ラジオボタンB
  </label>
</form>

/* JavaScript 側 */
var radioGroup = document.getElementById("radioGroup");

// 状態が変化したときにイベントが発生
radioGroup.addEventListener('change', (event) => {
  // 処理内容
});
ラジオボタンの変更の検知

関連記事