まず、HTMLでラジオボタングループを作成する基本的な構造を見てみましょう。以下は、3つの選択肢を持つラジオボタングループの例です。
<div>
<input type="radio" id="option1" name="radiogroup" value="option1">
<label for="option1">Option 1</label>
</div>
<div>
<input type="radio" id="option2" name="radiogroup" value="option2">
<label for="option2">Option 2</label>
</div>
<div>
<input type="radio" id="option3" name="radiogroup" value="option3">
<label for="option3">Option 3</label>
</div>上記のコードでは、input要素のtype属性を"radio"に設定し、name属性を同じ値にすることで、これらのラジオボタンが同じグループに属していることを示しています。
次に、これらのラジオボタンを選択したときに実行されるアクションを追加するために、jQueryを使用します。以下のコードは、ラジオボタンを選択したときにアラートメッセージを表示する例です。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('input[type="radio"]').change(function() {
var selectedValue = $('input[name="radiogroup"]:checked').val();
alert("選択されたオプション: " + selectedValue);
});
});
</script>上記のコードでは、changeイベントを使用してラジオボタンの変更を監視し、選択された値を取得してアラートメッセージを表示しています。
以上が、HTMLとjQueryを使用してラジオボタングループを作成し、選択された値を取得する基本的な手法です。これを応用すれば、さまざまなシナリオでラジオボタングループを使用することができます。
このブログ投稿では、さらに多くのコード例や応用的な使用方法を紹介することも可能ですが、上記の情報をもとにして基本的な使い方を理解していただくことを目指しています。