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を見ればわかる
プロパティ | 男性 | 女性 |
---|---|---|
checked | ||
defaultChecked | ||
disabled | ||
name | ||
value |
ウェブページを高速に表示するためには、初期レンダリング(ページに遷移したときに最初に表示される画面領域の描画)に不必要なJavaScriptの読み込みや実行は後回しにした方がよい。
ラジオボタンが変更されたときの処理は初期レンダリングに関係ないため、JavaScriptの読み込みや実行のためにHTMLの読み込みを中断させる必要はない。そのため、</body>
タグの直前に配置するか、script要素にdefer属性を指定する方がよい。
参考文献
Web Hypertext Application Technology Working Group (2022) "Events" HTML Living Standard