jQuery Radio Checked：簡単にラジオボタンの状態を取得・設定
この記事では、jQueryを使用してラジオボタンの選択状態を取得および設定する方法を詳しく説明します。ラジオボタンが選択されているかどうかを確認する方法と、jQueryを使用してラジオボタンを選択または選択解除する方法を学習します。
副題 1：ラジオボタンが選択されているかどうかの確認
:checkedセレクターを使用して、ラジオボタンが選択されているかどうかを確認します。is(':checked')メソッドを使用して、ラジオボタンの選択状態を判定し、trueまたはfalseを返します。- 選択されているラジオボタンの値を取得します。
副題 2：jQueryを使用してラジオボタンを選択する
prop('checked', true)メソッドを使用して、指定したラジオボタンを選択します。- 値に基づいてラジオボタンを選択します。
副題 3：jQueryを使用してラジオボタンの選択を解除する
prop('checked', false)メソッドを使用して、指定したラジオボタンの選択を解除します。- すべてのラジオボタンの選択を解除します。
副題 4：サンプルコードとよくある質問
:checked セレクターの使用例
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female" checked> 女性
<script>
$(document).ready(function(){
// 選択されているラジオボタンの値を取得
var selectedGender = $('input[name="gender"]:checked').val();
console.log(selectedGender); // 出力: female
});
</script>
is(':checked') メソッドの使用例
<input type="radio" name="color" value="red"> 赤
<input type="radio" name="color" value="blue" checked> 青
<script>
$(document).ready(function(){
// ラジオボタンが選択されているかどうかを確認
if ($('input[name="color"][value="red"]').is(':checked')) {
console.log("赤が選択されています");
} else {
console.log("赤は選択されていません");
}
});
</script>
prop('checked', true/false) メソッドの使用例
<input type="radio" name="city" value="tokyo"> 東京
<input type="radio" name="city" value="osaka"> 大阪
<script>
$(document).ready(function(){
// 東京のラジオボタンを選択
$('input[name="city"][value="tokyo"]').prop('checked', true);
// 大阪のラジオボタンの選択を解除
$('input[name="city"][value="osaka"]').prop('checked', false);
});
</script>
よくある質問
| 質問 | 回答 |
|---|---|
| 選択されているラジオボタンの値を取得するにはどうすればよいですか？ | $('input[name="ラジオボタングループ名"]:checked').val(); を使用します。 |
| 特定の条件に基づいてラジオボタンを選択するにはどうすればよいですか？ | 条件に基づいてセレクターを調整し、prop('checked', true) を使用します。 |