JavaScriptでのラジオボタンの操作

では、ラジオボタンを操作してみましょう。これらは一連のスイッチのグループで、そのうち1つだけを選択できます。複数のラジオボタンを1つのグループにするには、それらが同じ属性値を持つ必要があります name:

<input type="radio" name="elem">
<input type="radio" name="elem">
<input type="radio" name="elem">

そしてJavaScriptでどのボタンが選択されたかを判別するために、グループ内の各ラジオボタンに異なる値を持つvalue属性を追加します:

<input type="radio" name="elem" value="1">
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">

デフォルトで選択済みのラジオボタンを作成するには、属性checkedを設定する必要があります:

<input type="radio" name="elem" value="1" checked>
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">

実際にJavaScriptでこれらのボタンをどのように操作するか見てみましょう。上記のようなラジオボタングループと、通常のボタンがあるとします:

<input type="submit" id="button">

ボタンをクリックしたときに、現在選択されているラジオボタンの valueが画面に表示されるようにしましょう。

この課題を解決するには、すべてのラジオボタンをループで処理し、どれが選択されているかを判断する必要があります。そのためには、処理する各ラジオボタンの checkedプロパティの値を読み取ります。このプロパティがtrueに等しいボタンが選択されています。

上記を実装してみましょう:

let radios = document.querySelectorAll('input[type="radio"]');
let button = document.querySelector('#button');

button.addEventListener('click', function() {
	for (let radio of radios) {
		if (radio.checked) {
			console.log(radio.value);
		}
	}
});

3つのラジオボタン、段落、ボタンが与えられています。ボタンをクリックすると、選択されたラジオボタンの valueが段落に表示されます。