jQuery checkbox 値 取得

jQuery checkbox 値 取得: チェックボックスの値を簡単に取得する方法

jQueryを使ってチェックボックスの値を取得する方法について解説します。単一選択、複数選択、チェック状態の確認など、様々なケースに対応する方法を具体的なコード例とともに紹介します。初心者の方でも分かりやすく解説しているので、ぜひ参考にしてください。

単一チェックボックスの値を取得する

  • $(selector).val() を使って、チェックされている場合の値を取得する方法
  • チェックされていない場合は空文字が返ってくる点に注意
  • コード例: 
    
<input type="checkbox" id="myCheckbox" value="checkboxValue">
<label for="myCheckbox">チェックボックス</label>

<script>
  $("#myCheckbox").click(function() {
    if ($(this).is(":checked")) {
      console.log($(this).val()); // チェックされている場合の値を表示
    } else {
      console.log("チェックされていません");
    }
  });
</script>

複数チェックボックスの値を取得する

  • $(selector:checked) を使って、チェックされている全てのチェックボックスを選択
  • .each() メソッドを使って、選択されたチェックボックスをループ処理
  • ループ内で .val() を使って値を取得し、配列などに格納
  • コード例: 
    
<input type="checkbox" name="myCheckboxes" value="value1"> 値1
<input type="checkbox" name="myCheckboxes" value="value2"> 値2
<input type="checkbox" name="myCheckboxes" value="value3"> 値3

<button id="getCheckedValues">取得</button>

<script>
  $("#getCheckedValues").click(function() {
    var selectedValues = [];
    $("input[name='myCheckboxes']:checked").each(function() {
      selectedValues.push($(this).val());
    });
    console.log(selectedValues); // 選択された値の配列を表示
  });
</script>

チェック状態を確認する

  • .is(":checked") を使って、チェックボックスがチェックされているかどうかを判定
  • 真偽値 (true/false) が返ってくる
  • コード例: 
    
<input type="checkbox" id="myCheckbox" value="checkboxValue">
<label for="myCheckbox">チェックボックス</label>

<script>
  if ($("#myCheckbox").is(":checked")) {
    // チェックされている場合の処理
    console.log("チェックされています"); 
  } else {
    // チェックされていない場合の処理
    console.log("チェックされていません"); 
  }
</script>

まとめ

  • jQueryを使えば、チェックボックスの値取得や状態確認を簡単に行うことができます。
  • 本記事で紹介した方法を参考に、それぞれの状況に合わせて適切なコードを実装してください。

参考資料

jQuery checkbox 値 取得 FAQ

質問 回答
チェックボックスの値が取得できません。何が原因でしょうか？ 考えられる原因としては、セレクタが間違っている、JavaScriptの実行タイミングが誤っている、などが挙げられます。コードやエラーメッセージをよく確認してみましょう。
複数選択の場合、選択された値をカンマ区切りで文字列として取得したいです。 .map() メソッドと .get() メソッド、そして .join() メソッドを組み合わせることで実現できます。 

<script>
  var selectedValues = $("input[name='myCheckboxes']:checked").map(function() {
    return $(this).val();
  }).get().join(",");
  console.log(selectedValues); // カンマ区切りの文字列
</script>
チェックボックスの状態に応じて、他の要素の表示/非表示を切り替えたいです。 .is(":checked") でチェック状態を判定し、.show() や .hide() などのメソッドを使って要素の表示状態を制御できます。 

<script>
  $("#myCheckbox").change(function() {
    if ($(this).is(":checked")) {
      $("#targetElement").show(); 
    } else {
      $("#targetElement").hide(); 
    }
  });
</script>

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