JavaScriptでラジオボタンの選択状態を取得する

今回はJavaScript でラジオボタンがチェックされているかどうかを判定する方法について説明します。ラジオボタンの状態を取得するためには、input 要素オブジェクトの checked プロパティを使います。

ラジオボタンに同じ name 属性が付与されている場合

ひとまとまりのラジオボタンに対して同じ name 属性が与えられている場合、name 属性を使って各ラジオボタンを特定し、それぞれのラジオボタンの checked プロパティが true か否かを順番に調べます。通常は、複数のラジオボタンに同じ name 属性を付与しグループ化します。次のサンプルプログラムを見てみましょう。

HTML

JavaScript

任意のラジオボタンがチェックされているか否かはラジオボタンを表す input 要素オブジェクトの checkedプロパティで判定します。checked は、ラジオボタンがチェックされていれば true を返し、チェックされていなければ false を返します。

任意のラジオボタンは、以下のように特定します。

例えば、一番目の「りんご」のラジオボタンがチェックされているか否かは次のように記述します。

上記のサンプルでは、for 文を用いて各ラジオボタンがチェックされているかどうかを順番に判定しています。

name 属性が付与されていない場合

ラジオボタンにname属性が付与されていない場合は、elements[] を使ってラジオボタンを特定します。

HTML

JavaScript

elements[] は form の要素(ここでは input タグ)を配列の形で持つため、name 属性が付与されていなくとも各ラジオボタンを特定し、各ラジオボタンがチェックされているかを順番に判定しています。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集