Document Object Model (DOM)とは、W3Cから勧告されているHTML文書やXML文書をアプリケーションから利用するためのAPIである。

Elementオブジェクトのプロパティ、メソッド及びイベントもサポートする。

JavaScriptのRadioオブジェクトには次のプロパティがある。

Radioオブジェクトのプロパティ
プロパティ説明
alt 代替テキスト(alt属性の値)
checked ラジオボタンの状態
defaultChecked ラジオボタンのデフォルトの状態
disabled 要素が無効かどうか
form ラジオボタンを含むフォーム要素の参照
name ラジオボタンの名前(name属性の値)
type フォームのタイプ
value

checked

ラジオボタンのcheckedプロパティは、選択されていればtrue、選択されていなければfalseになる。

var checked = document.getElementById("male").checked

if (checked) {
  // 男性が選択されたときの処理
}

value

ラジオボタンのvalueプロパティは、ラジオボタンの値が格納されている。

var value = document.getElementById("male").value
<input type="radio" name="gender" value="male">男性</input>
<input type="radio" name="gender" value="female">女性</input>

イベント

ラジオボタンのonchangeイベントでラジオボタンの選択が変更されたことがわかる。

<input type="radio" name="gender" value="male" onchange="radio()">男性</input>
<input type="radio" name="gender" value="female" onchange="radio()">女性</input>

<script>
  function radio() {
    // ラジオボタンが変更されたときの処理
  }
</script>

inputタグのonchange属性でイベント制御を行う方法には、次のメリットがある。

ウェブページを高速に表示するためには、初期レンダリング(ページに遷移したときに最初に表示される画面領域の描画)に不必要なJavaScriptHTMLの最後に配置するのがよい。

ラジオボタンが変更されたときの処理は初期レンダリングに関係ないため、</body>の直前などに配置するのがよい。

男性 女性
ラジオボタンのプロパティ
プロパティ 男性 女性
checked
name
value