JavaScriptでラジオボタンを選択したり、値やイベントを取得する

JavaScriptでラジオボタンを選択したり、値やイベントを取得する方法をサンプルを交えてご紹介します。

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

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

alt

radio オブジェクトの alt プロパティは input 要素の alt 属性の値であり、ラジオボタンの代替テキストを表わす。

checked

radio オブジェクトの checked プロパティは input 要素の checked 属性の値であり、ラジオボタンの選択状態を表わす。

true

ラジオボタンが選択されている

false

ラジオボタンが選択されていない

checked プロパティの使用例を次に示す。

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

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

defaultChecked

radio オブジェクトの defaultChecked プロパティは、ラジオボタンの初期選択状態を表わす。最初の選択状態なので、ラジオボタンの選択状態を変えても変化しない。

disabled

radio オブジェクトの disabled プロパティは input 要素に disabled 属性が指定されているかどうかを表わす。

true

disabled属性が指定されている

false

disabled属性が指定されていない

form

ラジオボタンを含むフォーム要素の参照

name

radio オブジェクトの name プロパティは input 要素の name 属性の値であり、ラジオボタンの名前を表わす。

type

フォームのタイプ

value

radio オブジェクトの value プロパティは input 要素の value 属性の値であり、ラジオボタンの値を表わす。

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

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

onchange

ラジオボタンの選択状態が変更されたときに、onchange イベントが発生する。

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

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

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

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

• ラジオボタンを変更したときにどんな処理が行われるのかHTMLを見ればわかる

ウェブページを高速に表示するためには、初期レンダリング（ページに遷移したときに最初に表示される画面領域の描画）に不必要なJavaScriptの読み込みや実行は後回しにした方がよい。 ラジオボタンが変更されたときの処理は初期レンダリングに関係ないため、JavaScriptの読み込みや実行のためにHTMLの読み込みを中断させる必要はない。そのため、</body> タグの直前に配置するか、script要素にdefer属性を指定する方がよい。

参考文献

Web Hypertext Application Technology Working Group (2022) "Events" HTML Living Standard