jquery チェックボックス判定

jQueryでチェックボックスの判定をする方法まとめ

jQueryを使ってチェックボックスの操作をする方法をまとめました。チェック状態の判定、チェックのつけ外し、変更時のイベント取得など、実用的なコード例を交えて解説します。

チェックボックスの基本操作

jQueryを使ってチェックボックスを操作する際の基本的な方法を見ていきましょう。

チェック状態の判定：`is(':checked')`を使った判定方法

チェックボックスがチェックされているかどうかを判定するには、is(':checked') メソッドを使用します。

単一チェックボックスの判定

<input type="checkbox" id="myCheckbox" >
<button id="checkButton">チェック状態を確認</button>

<script>
$(document).ready(function(){
  $("#checkButton").click(function(){
    if ($("#myCheckbox").is(":checked")) {
      alert("チェックされています");
    } else {
      alert("チェックされていません");
    }
  });
});
</script>

複数チェックボックスからチェック済みの要素を取得

<input type="checkbox" name="hobby" value="reading">読書
<input type="checkbox" name="hobby" value="sports">スポーツ
<input type="checkbox" name="hobby" value="music">音楽
<button id="getSelectedButton">選択された趣味を表示</button>

<script>
$(document).ready(function(){
  $("#getSelectedButton").click(function(){
    var selectedHobbies = [];
    $('input[name="hobby"]:checked').each(function() {
      selectedHobbies.push($(this).val());
    });
    alert("選択された趣味：" + selectedHobbies.join(", "));
  });
});
</script>

チェックボックスの操作：`prop('checked', true/false)`を使った方法

チェックボックスのチェックを入れたり外したりするには、prop('checked', true/false) メソッドを使用します。

チェックをつける

$("#myCheckbox").prop('checked', true);

チェックを外す

$("#myCheckbox").prop('checked', false);

変更イベントの取得：`change()`を使ったイベントリスナーの設定

チェックボックスの状態が変更されたときに何か処理を実行したい場合は、change() メソッドを使ってイベントリスナーを設定します。

<input type="checkbox" id="agreeCheckbox">同意する
<div id="hiddenContent" style="display:none;">
  同意いただきありがとうございます！
</div>

<script>
$(document).ready(function(){
  $("#agreeCheckbox").change(function(){
    if ($(this).is(":checked")) {
      $("#hiddenContent").show();
    } else {
      $("#hiddenContent").hide();
    }
  });
});
</script>

より実践的なチェックボックス操作

基本的な操作を踏まえて、より実践的なチェックボックス操作の例を見ていきましょう。

全選択・全解除機能の実装

複数のチェックボックスを一括で選択したり、解除したりする機能は、ユーザビリティの向上に役立ちます。

<button id="selectAll">全て選択</button>
<button id="deselectAll">全て解除</button>
<input type="checkbox" name="item">アイテム1
<input type="checkbox" name="item">アイテム2
<input type="checkbox" name="item">アイテム3

<script>
$(document).ready(function(){
  $("#selectAll").click(function(){
    $('input[name="item"]').prop('checked', true);
  });

  $("#deselectAll").click(function(){
    $('input[name="item"]').prop('checked', false);
  });
});
</script>

チェック状態による表示の切り替え

チェックボックスの状態に応じて、関連するコンテンツの表示・非表示を切り替えることができます。

<input type="checkbox" id="showDetailsCheckbox">詳細を表示
<div id="details" style="display:none;">
  ここに詳細情報が表示されます。
</div>

<script>
$(document).ready(function(){
  $("#showDetailsCheckbox").change(function(){
    if ($(this).is(":checked")) {
      $("#details").show();
    } else {
      $("#details").hide();
    }
  });
});
</script>

チェックされた値の取得と利用

チェックボックスの値を取得し、フォーム送信やAjax処理に利用することができます。

<form id="myForm">
  <input type="checkbox" name="selectedOptions[]" value="option1">オプション1
  <input type="checkbox" name="selectedOptions[]" value="option2">オプション2
  <input type="checkbox" name="selectedOptions[]" value="option3">オプション3
  <button type="submit">送信</button>
</form>

<script>
$(document).ready(function(){
  $("#myForm").submit(function(event){
    event.preventDefault();
    var selectedOptions = [];
    $('input[name="selectedOptions[]"]:checked').each(function() {
      selectedOptions.push($(this).val());
    });
    // 選択されたオプションを使って処理を行う
    console.log("選択されたオプション：", selectedOptions);
  });
});
</script>

まとめ

本記事で紹介したjQueryのメソッドを使えば、チェックボックスを柔軟に操作できます。サンプルコードを参考に、ご自身のウェブサイトにも実装してみてください。

参考資料

よくある質問

質問	回答
`is(':checked')` と `prop('checked')` の違いは何ですか？	`is(':checked')` はチェック状態を判定し、`prop('checked')` はチェック状態を設定または取得します。
複数のチェックボックスから選択された値を配列で取得するにはどうすればよいですか？	`$('input[name="checkboxName"]:checked').each()` を使って、チェックされているチェックボックスをループ処理し、それぞれの値を配列に追加します。
チェックボックスの状態が変更されたときに、特定の処理を実行するにはどうすればよいですか？	`change()` メソッドを使ってイベントリスナーを設定し、その中で目的の処理を実行します。

その他の参考記事:jquery checkbox 外す