実務にて、特定の要素を表示、非表示にする処理の実装が多々あります。
ラジオボタンの選択に応じて、特定の要素を表示・非表示にする方法について説明します
1. 基本のHTML構造
基本となるHTMLを作成します。
2つのラジオボタンと、それに対応する2つのdiv要素を用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラジオボタンで要素を表示・非表示</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<label><input type="radio" name="toggle" value="option1"> オプション1</label>
<label><input type="radio" name="toggle" value="option2"> オプション2</label>
<div id="content1" style="display:none;">
こちらはオプション1の内容です。
</div>
<div id="content2" style="display:none;">
こちらはオプション2の内容です。
</div>
</body>
</html>
2. jQueryスクリプトの作成
jQueryを使用して、ラジオボタンの選択に応じて内容を表示・非表示にするスクリプトを作成します。
ここでは、ラジオボタンの変更イベントに対して処理を行います。
$(document).ready(function() {
$('input[type=radio][name=toggle]').change(function() {
if (this.value == 'option1') {
$('#content1').show();
$('#content2').hide();
} else if (this.value == 'option2') {
$('#content1').hide();
$('#content2').show();
}
});
});
3. 動作の確認
「オプション1」を選択すると、「content1」が表示され、
「content2」は非表示になります。
逆に、「オプション2」を選択すると、「content2」が表示され、
「content1」は非表示になります。
まとめ
jQueryを使用することで、簡単にラジオボタンの選択に応じて要素の表示・非表示を制御することができます。
この方法は、フォームの動的なインターフェースを作成する際に非常に便利です。
是非使用してみてください。
コメント