ラジオボタンを未選択に戻す方法
ラジオボタンは、複数の選択肢から1つだけを選択できるUI要素として広く使われています。しかし、HTMLの標準機能では、一度選択したラジオボタンを未選択の状態に戻すことはできません。つまり、ユーザーは選択を変更することしかできず、選択を完全に取り消すことはできません。
この記事では、JavaScriptを使ってこの制限を克服し、選択をキャンセルできるラジオボタンを実装する方法を紹介します。選択済みのラジオボタンをもう一度クリックすると、選択が解除され、未選択の状態に戻ります。
JavaScriptによる実装
以下のコードは、JavaScriptを使用してラジオボタンの選択をキャンセルする例です。
<html>
<head>
<script>
function clearSelection(groupName) {
const radioButtons = document.getElementsByName(groupName);
for (let i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
radioButtons[i].checked = false;
break;
}
}
}
</script>
</head>
<body>
<form>
<label>
<input type="radio" name="fruit" value="apple" onclick="clearSelection('fruit')" >
りんご
</label><br>
<label>
<input type="radio" name="fruit" value="banana" onclick="clearSelection('fruit')" >
バナナ
</label><br>
<label>
<input type="radio" name="fruit" value="orange" onclick="clearSelection('fruit')" >
オレンジ
</label>
</form>
</body>
</html>
コード解説
clearSelection(groupName)関数:- この関数は、ラジオボタングループの名前を引数として受け取ります。
document.getElementsByName(groupName)を使用して、指定された名前を持つすべてのラジオボタンを取得します。- ループ処理で各ラジオボタンをチェックし、選択されているラジオボタンを見つけたら、その
checkedプロパティをfalseに設定して選択を解除します。
- HTMLのラジオボタン:
- 各ラジオボタンの
onclickイベントにclearSelection関数を設定します。これにより、ラジオボタンがクリックされるたびに、関数が実行され、選択状態が切り替わります。
- 各ラジオボタンの
動作確認
上記のコードを記述したHTMLファイルをブラウザで開くと、ラジオボタンが表示されます。いずれかのラジオボタンを選択した後、もう一度クリックすると選択が解除され、未選択の状態に戻ります。
注意点
この方法は、JavaScriptが有効になっているブラウザでのみ機能します。JavaScriptが無効になっている場合は、通常のラジオボタンと同様に動作し、選択を解除することはできません。
参考資料
関連QA
| 質問 | 回答 |
|---|---|
| 複数のラジオボタングループがある場合、どのように処理すればよいですか？ | それぞれのラジオボタングループに異なる名前を付け、clearSelection関数を呼び出す際に、該当するグループの名前を渡してください。 |
| JavaScriptを使わずにラジオボタンを未選択にすることはできますか？ | いいえ、HTMLの標準機能ではできません。JavaScriptを使用する必要があります。 |
| この方法は、モバイルブラウザでも動作しますか？ | はい、ほとんどのモダンブラウザで動作します。ただし、古いブラウザや一部の特殊なブラウザでは、動作しない可能性があります。 |
その他の参考記事:jquery radio checked 取得