jQuery ラジオボタンの値：選択された値の取得方法
この記事では、jQuery を使用してフォーム内の選択されたラジオボタンの値を取得する方法について解説します。さまざまな方法とシナリオを検討し、ラジオボタンの選択を簡単に処理できるようにします。
---方法 1: `:checked` セレクタと `val()` メソッドを使用する
これは最も一般的で簡単な方法です。jQuery の `:checked` セレクタと `val()` メソッドを組み合わせて、選択されたラジオボタンの値を取得します。
手順:
- `$('input[name="radioGroupName"]:checked')` セレクタを使用して、指定された名前（"radioGroupName"）を持ち、選択されているラジオボタンを選択します。
- `.val()` メソッドを使用して、選択されたラジオボタンの値を取得します。
コード例:
<script>
var selectedValue = $('input[name="myRadio"]:checked').val();
</script>
解説:
- `$('input[name="myRadio"]:checked')` は、name 属性が "myRadio" で、選択されているラジオボタンを選択します。
- `.val()` メソッドは、選択されたラジオボタンの値を返します。
メリット:
- 簡潔で理解しやすい
- ほとんどの場合に適用可能
方法 2: `each()` メソッドを使用してすべてのラジオボタンを反復処理する
選択されているかどうかを確認したり、すべての選択された値を取得したりするなど、すべてのラジオボタンに対してより複雑な処理を行う必要がある場合は、`each()` メソッドを使用できます。
手順:
- `$('input[name="radioGroupName"]')` セレクタを使用して、指定された名前を持つすべてのラジオボタンを選択します。
- `.each()` メソッドを使用して、すべての選択されたラジオボタンを反復処理します。
- `each()` コールバック関数内で、`$(this).is(':checked')` を使用して、現在のラジオボタンが選択されているかどうかを確認します。
- 選択されている場合は、`$(this).val()` を使用して値を取得します。
コード例:
<script>
$('input[name="myRadio"]').each(function() {
if ($(this).is(':checked')) {
var selectedValue = $(this).val();
// 選択された値に対する操作
}
});
</script>
メリット:
- より柔軟で、より複雑な処理が可能
- すべての選択された値を取得できる
まとめ
どの方法を選択するかは、具体的なニーズによって異なります。選択されたラジオボタンの値を1つだけ取得する必要がある場合は、方法 1 で十分です。すべてのラジオボタンに対してより複雑な処理を行う必要がある場合は、方法 2 の方が適しています。
---参考文献
---Q&A
| 質問 | 回答 |
|---|---|
| 複数のラジオボタングループがある場合、どのように選択された値を取得できますか？ | 各ラジオボタングループに異なる name 属性を指定し、それぞれのグループに対して上記の方法を使用します。 |
| 選択されたラジオボタンの値が変更されたときにイベントをトリガーするにはどうすればよいですか？ | `change()` メソッドを使用します。例： $('input[name="myRadio"]').change(function() { ... }); |
| ラジオボタンの値をデフォルトで設定するにはどうすればよいですか？ | HTML の `checked` 属性を使用します。例： <input type="radio" name="myRadio" value="value1" checked> |
その他の参考記事:jquery radio チェック する