jQuery checked セレクタ：チェックボックスやラジオボタンの選択を極める
jQueryを使って、チェックボックスやラジオボタンの選択状態を取得・操作する方法を解説します。checkedセレクタの使い方を中心に、実用的なコード例も交えて分かりやすく説明します。
1. checked セレクタの基本
:checkedセレクタは、チェックボックス(<input type="checkbox">)とラジオボタン(<input type="radio">)のうち、チェックされている要素のみを選択します。- 単独で使用することは少なく、他のセレクタと組み合わせて使用することが多いです。
2. チェック状態の確認
is(':checked')を使用すると、要素がチェックされているかどうかを真偽値 (true/false) で取得できます。
コード例:
<input type="checkbox" id="myCheckbox">
<script>
// チェックボックスがチェックされているか確認
if ($('#myCheckbox').is(':checked')) {
// チェックされている場合の処理
console.log("チェックされています");
} else {
// チェックされていない場合の処理
console.log("チェックされていません");
}
</script>
3. チェック状態の変更
.prop('checked', true)でチェックを入れることができます。.prop('checked', false)でチェックを外すことができます。
コード例:
<input type="checkbox" id="myCheckbox">
<button id="checkButton">チェックを入れる</button>
<button id="uncheckButton">チェックを外す</button>
<script>
// チェックボックスにチェックを入れる
$('#checkButton').click(function() {
$('#myCheckbox').prop('checked', true);
});
// チェックボックスのチェックを外す
$('#uncheckButton').click(function() {
$('#myCheckbox').prop('checked', false);
});
</script>
4. チェックされている要素の値を取得
.val()を使用することで、チェックされている要素の値を取得できます。
コード例:
<input type="radio" name="myRadio" value="apple">りんご
<input type="radio" name="myRadio" value="orange">みかん
<button id="getValueButton">値を取得</button>
<div id="selectedValue"></div>
<script>
$('#getValueButton').click(function() {
// チェックされているラジオボタンの値を取得
var selectedValue = $('input[name="myRadio"]:checked').val();
$('#selectedValue').text("選択された値: " + selectedValue);
});
</script>
5. 実用的なコード例
例1: チェックボックスのチェック状態に応じて要素を表示/非表示
<input type="checkbox" id="showHideCheckbox">表示/非表示
<div id="targetElement" style="display: none;">表示/非表示される要素</div>
<script>
$('#showHideCheckbox').change(function() {
if ($(this).is(':checked')) {
$('#targetElement').show();
} else {
$('#targetElement').hide();
}
});
</script>
例2: 複数のチェックボックスから選択された値を取得
<input type="checkbox" name="myCheckboxes" value="apple">りんご
<input type="checkbox" name="myCheckboxes" value="orange">みかん
<input type="checkbox" name="myCheckboxes" value="grape">ぶどう
<button id="getSelectedValuesButton">選択された値を取得</button>
<div id="selectedValues"></div>
<script>
$('#getSelectedValuesButton').click(function() {
var selectedValues = [];
$('input[name="myCheckboxes"]:checked').each(function() {
selectedValues.push($(this).val());
});
$('#selectedValues').text("選択された値: " + selectedValues.join(', '));
});
</script>
まとめ
jQueryのcheckedセレクタを使うことで、チェックボックスやラジオボタンの選択状態を簡単に取得・操作できます。この記事で紹介したコード例を参考に、それぞれのケースに合わせて活用してみてください。
その他の参考記事:jquery checked