jQueryでのcheckboxのcheckedの扱い方を紹介！checkedを使いこなそう

Javascript
jQuery
プログラミング言語

公開日時: 2021-01-18 　更新日時: 2022-06-06

jQueryでのcheckboxのcheckedの扱い方を紹介！checkedを使いこなそう

この記事でわかること

システム エンジニア: checkboxの状態判定について教えてください。

プロジェクト マネージャー: では5種類のチェック状態の扱い方について見ていきましょう。

jQueryでのcheckboxのチェック状態（checked）の扱い方について

今回は、jQueryでのcheckboxのチェック状態（checked）の扱い方について説明します。

ここでは、checkboxの
・設定
・取得
・全選択/全解除
・value値の取得
・チェック数取得
について紹介します。

jQueryでのcheckboxのチェック状態（checked）の扱い方に興味のある方はぜひご覧ください。

設定

checkboxのチェック状態を設定するには、propメソッドを使用します。HTMLを以下に記載します。

<input type="checkbox" class="checkbox1" value="pvalue" id="pid">チェック

1	<input type="checkbox" class="checkbox1" value="pvalue" id="pid">チェック

jQueryは以下のように記述します。

$(function() {
  // checkboxの属性をチェック状態に設定
  $('.checkbox1').prop('checked', true);
});

$(function() {

// checkboxの属性をチェック状態に設定

$('.checkbox1').prop('checked', true);

});

実行結果は以下のようになります。

チェック

複数のチェックボックスをまとめてチェックすることもできます。
以下の場合、name属性指定でチェック状態を設定しています。

<h3>チェック1</h3>
<input type="checkbox" class="checkbox2" value="pvalue" id="pid">チェック1
<input type="checkbox" class="checkbox2" value="pvalue" id="pid">チェック2
<input type="checkbox" class="checkbox2" value="pvalue" id="pid">チェック3

<h3>チェック2</h3>
<input type="checkbox" class="checkbox22" value="pvalue" id="pid">チェック1
<input type="checkbox" class="checkbox22" value="pvalue" id="pid">チェック2
<input type="checkbox" class="checkbox22" value="pvalue" id="pid">チェック3

<input type="checkbox" class="checkbox2" value="pvalue" id="pid">チェック1

<input type="checkbox" class="checkbox2" value="pvalue" id="pid">チェック2

<input type="checkbox" class="checkbox2" value="pvalue" id="pid">チェック3

<input type="checkbox" class="checkbox22" value="pvalue" id="pid">チェック1

<input type="checkbox" class="checkbox22" value="pvalue" id="pid">チェック2

<input type="checkbox" class="checkbox22" value="pvalue" id="pid">チェック3

jQueryは以下のように記述します。

$(function() {
  // checkbox2の属性をチェック状態に設定
  $('.checkbox2').prop('checked', true);
});

$(function() {

// checkbox2の属性をチェック状態に設定

$('.checkbox2').prop('checked', true);

});

実行結果は以下のようになります。

チェック1

チェック1
チェック2
チェック3

チェック2

チェック1
チェック2
チェック3

取得

checkboxのチェック状態を取得するには、propメソッド、isメソッド、valメソッドを使用します。HTMLを以下に記載します。

<input type="checkbox" name="sample3" value="value1" id="prop">チェック1
<input type="checkbox" name="sample3" value="value2" id="val">チェック2
<input type="checkbox" name="sample3" value="value3" id="is">チェック3

<p class="p3"></p>

<input type="checkbox" name="sample3" value="value1" id="prop">チェック1

<input type="checkbox" name="sample3" value="value2" id="val">チェック2

<input type="checkbox" name="sample3" value="value3" id="is">チェック3

jQueryは以下のように記述します。

$(function() {
  // checkboxの状態が変わった場合
  $('input[name="sample3"]').change(function() {
    // 初期化
    let res = '';
    $('.p3').text(res);
 
    // チェック状態を取得(prop) 
    let prop_ret = $('#prop').prop('checked');
    // チェック状態を取得(is) 
    let is_ret = $('#is').is(':checked');
    // チェック状態を取得(val) 
    let val_ret = $('#val:checked').val();
 
    // propで取得したチェック状態
    if (prop_ret) {
      res += 'prop ';
    }
 
    // isで取得したチェック状態
    if (is_ret) {
      res += 'is ';
    }

    // valで取得したチェック状態
    if (val_ret) {
      res += 'val ';
    }
    
    $('.p3').text(res);
  });
});

$(function() {

// checkboxの状態が変わった場合

$('input[name="sample3"]').change(function() {

// 初期化

let res = '';

$('.p3').text(res);

// チェック状態を取得(prop)

let prop_ret = $('#prop').prop('checked');

// チェック状態を取得(is)

let is_ret = $('#is').is(':checked');

// チェック状態を取得(val)

let val_ret = $('#val:checked').val();

// propで取得したチェック状態

if (prop_ret) {

res += 'prop ';

}

// isで取得したチェック状態

if (is_ret) {

res += 'is ';

}

// valで取得したチェック状態

if (val_ret) {

res += 'val ';

}

$('.p3').text(res);

});

実行結果は以下のようになります。

チェック1
チェック2
チェック3

全選択/全解除

checkboxのチェック状態をすべて設定（全選択/全解除）する方法を紹介します。HTMLを以下に記載します。

<input type="checkbox" name="sample4" value="value1" checked>チェック1
<input type="checkbox" name="sample4" value="value2">チェック2
<input type="checkbox" name="sample4" value="value3">チェック3
<br>
<input type="button" id="button41" value="全選択" />
<input type="button" id="button42" value="全解除" />

<input type="checkbox" name="sample4" value="value1" checked>チェック1

<input type="checkbox" name="sample4" value="value2">チェック2

<input type="checkbox" name="sample4" value="value3">チェック3

<br>

jQueryは以下のように記述します。buttonのクリックイベントを利用し、name属性指定ですべてを変更します。

$(function() {

  // 全選択
  $("#button41").click(function() {
    $('input:checkbox[name="sample4"]').prop('checked', true);
  });

  // 全解除
  $("#button42").click(function() {
    $('input:checkbox[name="sample4"]').prop('checked', false);
  });
});

$(function() {

// 全選択

$("#button41").click(function() {

$('input:checkbox[name="sample4"]').prop('checked', true);

});

// 全解除

$("#button42").click(function() {

$('input:checkbox[name="sample4"]').prop('checked', false);

});

実行結果は以下のようになります。

チェック1
チェック2
チェック3

value値の取得

checkboxのvalue値を取得するには、valメソッドを使用します。HTMLを以下に記載します。

<input type="checkbox" name="sample5" value="value1" checked>チェック1
<input type="checkbox" name="sample5" value="value2">チェック2
<input type="checkbox" name="sample5" value="value3">チェック3
<br>
<input type="button" id="button5" value="値取得" />
<p class="p5"></p>

<input type="checkbox" name="sample5" value="value1" checked>チェック1

<input type="checkbox" name="sample5" value="value2">チェック2

<input type="checkbox" name="sample5" value="value3">チェック3

<br>

jQueryは以下のように記述します。buttonのクリックイベントで、チェックしたvalue値を取得しています。

$(function() {

  // buttonのクリックイベント
  $("#button5").click(function() {
    // 初期化
    let res = '';
    $('.p5').text(res);

    // チェックしたvalueをすべて取得
    $('input:checkbox[name="sample5"]:checked').each(function() {
      res += $(this).val() + ' ';
      $('.p5').text(res);
    })
  })
});

$(function() {

// buttonのクリックイベント

$("#button5").click(function() {

// 初期化

let res = '';

$('.p5').text(res);

// チェックしたvalueをすべて取得

$('input:checkbox[name="sample5"]:checked').each(function() {

res += $(this).val() + ' ';

$('.p5').text(res);

})

});

実行結果は以下のようになります。

チェック1
チェック2
チェック3

チェック数取得

checkboxのチェック数を取得する方法を紹介します。HTMLを以下に記載します。

<input type="checkbox" name="sample6" value="value1" checked>チェック1
<input type="checkbox" name="sample6" value="value2">チェック2
<input type="checkbox" name="sample6" value="value3">チェック3
<br>
<input type="button" id="button6" value="チェック数確認" />
<p class="p6"></p>

<input type="checkbox" name="sample6" value="value1" checked>チェック1

<input type="checkbox" name="sample6" value="value2">チェック2

<input type="checkbox" name="sample6" value="value3">チェック3

<br>

jQueryは以下のように記述します。

$(function() {

  // buttonのクリックイベント
  $("#button6").click(function() {

    // チェック数を取得
    let res = $('input:checkbox[name="sample6"]:checked').length;
    if(res == 0) {
      $('.p6').text('チェックしてください');
    } else {
      $('.p6').text("チェック数:" + res);
    }
  })
});

$(function() {

// buttonのクリックイベント

$("#button6").click(function() {

// チェック数を取得

let res = $('input:checkbox[name="sample6"]:checked').length;

if(res == 0) {

$('.p6').text('チェックしてください');

} else {

$('.p6').text("チェック数:" + res);

}

})

});

実行結果は以下のようになります。チェック数が0の場合にボタンをクリックすると「チェックしてください」と表示されます。

チェック1
チェック2
チェック3

システム エンジニア: 様々なメソッドを利用して判定しているのですね。

プロジェクト マネージャー: 基本的に4種類のメソッドを使って取得や設定を行います。

まとめ

jQueryでのcheckboxの「設定」・「取得」・「全選択/全解除」・「value値の取得」・「チェック数取得」について紹介しました。

ぜひご自身でjQueryのソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

jQueryでのcheckboxのcheckedの扱い方を紹介！checkedを使いこなそう

jQueryでのcheckboxのチェック状態（checked）の扱い方について

設定

チェック1

チェック2

取得

全選択/全解除

value値の取得

チェック数取得

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

jQueryでのcheckboxのcheckedの扱い方を紹介！checkedを使いこなそう

jQueryでのcheckboxのチェック状態（checked）の扱い方について

設定

チェック1

チェック2

取得

全選択/全解除

value値の取得

チェック数取得

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

jQueryのparentメソッドとは？parentメソッドの使用方法を紹介

jQueryでのaddClassメソッドの使い方を紹介！複数classを追加する方法とは？

jQueryを利用したsetTimeoutを紹介！setIntervalとは

jQueryの「id」セレクタを利用する方法9選｜使う際の注意点とは

jQueryでremove()を使った要素の削除方法5選！その他の方法も解説