jQueryでラジオボタンの選択状態を取得・設定する方法
2024-04-02
jQueryでラジオボタンをチェックする方法
prop() メソッドを使用して、ラジオボタンの checked プロパティを true に設定できます。
// 特定の ID を持つラジオボタンをチェック
$( '#my-radio-button' ).prop( 'checked', true );
// 特定の値を持つラジオボタンをチェック
$( 'input[type="radio"][value="apple"]' ).prop( 'checked', true );
// 特定の ID を持つラジオボタンをチェック
$( '#my-radio-button' ).attr( 'checked', 'checked' );
// 特定の値を持つラジオボタンをチェック
$( 'input[type="radio"][value="apple"]' ).attr( 'checked', 'checked' );
val() メソッドを使用して、ラジオボタンの値を設定することもできます。ただし、この方法は、ラジオボタングループ内の他のラジオボタンもチェック解除してしまうので注意が必要です。
// 特定の値を持つラジオボタンをチェック
$( 'input[type="radio"][name="my-radio-group"]' ).val( 'apple' );
click() メソッドを使用して、ラジオボタンをクリックすることもできます。
// 特定の ID を持つラジオボタンをクリック
$( '#my-radio-button' ).click();
イベントリスナーを使用して、ラジオボタンがクリックされたときにチェックする処理を実行できます。
$( 'input[type="radio"]' ).on( 'click', function() {
// ラジオボタンがクリックされたときの処理
});
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryでラジオボタンをチェック</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>ラジオボタンをチェック</h1>
<p>
<input type="radio" id="red" name="color" value="red" checked>
<label for="red">赤</label>
</p>
<p>
<input type="radio" id="green" name="color" value="green">
<label for="green">緑</label>
</p>
<p>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">青</label>
</p>
<script>
// 特定の ID を持つラジオボタンをチェック
$( '#green' ).prop( 'checked', true );
// 特定の値を持つラジオボタンをチェック
$( 'input[type="radio"][value="blue"]' ).attr( 'checked', 'checked' );
// ラジオボタングループ内のすべてのラジオボタンをチェック解除
$( 'input[type="radio"][name="color"]' ).val( '' );
// ラジオボタンがクリックされたときの処理
$( 'input[type="radio"]' ).on( 'click', function() {
console.log( '選択された値:', $( this ).val() );
});
</script>
</body>
</html>
このコードを実行すると、以下のようになります。
- 最初に、緑色のラジオボタンがチェックされます。
- ラジオボタンをクリックすると、コンソールに選択された値が表示されます。
このサンプルコードを参考に、さまざまな方法を使用してラジオボタンをチェックしてみてください。
filter() メソッドを使用して、特定の条件に合致するラジオボタンを取得し、prop() メソッドを使用してチェックすることができます。
// 特定の値を持つラジオボタンをチェック
$( 'input[type="radio"][name="my-radio-group"]' ).filter( '[value="apple"]' ).prop( 'checked', true );
// 特定の ID を持つラジオボタンの子要素を取得し、チェック
$( '#my-radio-group' ).find( 'input[type="radio"][value="apple"]' ).prop( 'checked', true );
// ラジオボタンの子要素を取得し、親要素のラジオボタンをチェック
$( 'input[type="radio"][value="apple"]' ).closest( 'label' ).find( 'input[type="radio"]' ).prop( 'checked', true );
each() メソッドを使用して、ラジオボタングループ内のすべてのラジオボタンをループ処理し、チェックすることができます。
// ラジオボタングループ内のすべてのラジオボタンをチェック
$( 'input[type="radio"][name="my-radio-group"]' ).each( function() {
$( this ).prop( 'checked', true );
});
これらの方法は、上記の 5 つの方法よりも複雑ですが、より柔軟な方法でラジオボタンをチェックすることができます。
javascript jquery radio-button
