jQueryでラジオボタンを選択状態にする方法【簡単解説】
jQueryを使ってラジオボタンを選択状態にする方法を、初心者にもわかりやすく解説します。propメソッド、attrメソッドを使った方法、複数のラジオボタンから選択する方法、サンプルコード付きで解説しているので、すぐに実践できます。
ラジオボタンを選択状態にするには？
- ラジオボタンは、複数の選択肢から1つだけを選択する際に使用するUI要素
- jQueryを使って、特定のラジオボタンを選択状態にすることができる
prop()メソッドを使った方法
prop()メソッドは、要素のプロパティにアクセスしたり、設定したりすることができるjQueryのメソッドです。ラジオボタンを選択状態にするには、prop('checked', true) を使用します。
<input type="radio" name="fruit" value="apple">りんご
<input type="radio" name="fruit" value="orange">みかん
<input type="radio" name="fruit" value="banana">バナナ
<script>
$(function(){
// 'fruit'というnameを持つラジオボタンのうち、valueが'orange'のものを選択状態にする
$('input[name="fruit"][value="orange"]').prop('checked', true);
});
</script>
attr()メソッドを使った方法
過去のjQueryバージョンでは、attr()メソッドを使ってラジオボタンを選択状態にすることが一般的でした。現在では、prop()メソッドを使用することが推奨されていますが、互換性のためにattr()メソッドを使った方法も紹介します。
<input type="radio" name="color" value="red">赤
<input type="radio" name="color" value="blue">青
<input type="radio" name="color" value="green">緑
<script>
$(function(){
// 'color'というnameを持つラジオボタンのうち、valueが'blue'のものを選択状態にする
$('input[name="color"][value="blue"]').attr('checked', true);
});
</script>
複数のラジオボタンから選択する方法
複数のラジオボタンがある場合、eq()メソッドを使って特定の順番のラジオボタンを選択することができます。 eq(0)は最初のラジオボタン、eq(1)は2番目のラジオボタンを指します。
<input type="radio" name="animal" value="dog">犬
<input type="radio" name="animal" value="cat">猫
<input type="radio" name="animal" value="bird">鳥
<script>
$(function(){
// 'animal'というnameを持つラジオボタンのうち、2番目のラジオボタン(猫)を選択状態にする
$('input[name="animal"]').eq(1).prop('checked', true);
});
</script>
まとめ
jQueryを使ってラジオボタンを選択状態にする方法は、prop('checked', true) を使用するのが簡単で、最新のバージョンにも対応しているためおすすめです。複数のラジオボタンから選択する場合は、eq()メソッドと組み合わせて使用することができます。
その他の参考記事:ラジオ ボタン jquery