jQuery checked セレクタ

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