【jQuery】チェックボックスの判定方法とその応用術まとめ【コピペで動きます】

今回の記事は、

  • jQueryでチェックボックスの状態を判定したい
  • チェックボックスを使って色々な機能を実装したい

という方に向けた記事になっています。

この記事の前半では、「jQueryでのチェックボックスの判定方法」について解説しつつ、後半では「チェックボックスの判定機能を利用したイベントの実装方法」をご紹介させて頂きます。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


チェックボックスがチェックされているか判定する方法

それではまずは、チェックボックスがチェックされているかどうかを判定する方法を見ていきましょう。

こちらの記事(【jQuery】attr()とprop()の違い・使い分け方まとめ)でもご紹介している通り、チェックボックスの判定には、attr()メソッドではなくprop()メソッドを使用していきます。

使い方自体はとてもシンプルで、prop()メソッドの引数に “checked” を指定してあげるだけで大丈夫です。

チェックボックスの判定方法

$(セレクタ).prop("checked")

それでは実際のコードを見ながらその挙動を確認していきましょう。

実装コード

<input id="test-check1" type="checkbox">チェックボックス1

<input type="button" onClick="check1()" value="チェック状態を判定する">

<script>
function check1() {
 const checkbox1 = $("#test-check1")

  if (checkbox1.prop("checked")) {
    console.log("チェックされています")
  } else {
    console.log("チェックされていません")
  }
}
</script>

動作確認用



  

上記のボタンを押していただくと、チェックボックスがチェックされている時にはディベロッパーツールのconsole画面に「チェックされています」と表示され、チェックが外れている時には「チェックされていません」と表示されているかと思います。

prop()メソッドを使ってチェックする/チェックを外す方法

さて、prop()メソッドを使ってチェックボックスの状態を判定する方法をご確認いただいたところで、続いては同じprop()メソッドを使って、チェックボックスをチェックする方法およびチェックボックスからチェックを外す方法をご紹介していきます。

こちらも使い方はとてもシンプルで、第1引数に “checked” を指定し、第2引数に “true” 或いは “false” を指定するだけで大丈夫です。

チェックする/チェックを外す方法

// チェックする場合
$(セレクタ).prop("checked", true)

// チェックを外す場合
$(セレクタ).prop("checked", false)

それでは実際のコードを見ながらその挙動を確認していきましょう。

実装コード

<input id="test-check2" type="checkbox">チェックボックス2

<input type="button" onClick="check2()" value="チェックする">
<input type="button" onClick="uncheck2()" value="チェックを外す">

<script>
function check2() {
 const checkbox2 = $("#test-check2")

  checkbox2.prop("checked", true)
}

function uncheck2() {
 const checkbox2 = $("#test-check2")

  checkbox2.prop("checked", false)
}
</script>

動作確認用




  

上記の2つのボタンを押していただくと、チェックボックスの状態が切り替わるのがご確認いただけるかと思います。

prop()メソッドを使って実装できる様々な機能

さて、prop()メソッドを使ってチェックボックスを扱う方法をご確認いただいたところで、ここからはprop()メソッドを使って実装できる様々な機能をご紹介していこうと思います。

今回ご紹介する機能は以下の3つです。

  • 1. 全てをチェックする/全てのチェックを外す
  • 2. チェックされている値を取得する
  • 3. チェックされている場合のみボタンを有効にする

prop()メソッドを使って全てをチェックする/全てのチェックを外す機能

まずは、prop()メソッドを使って、全てのチェックボックスをチェックする機能および全てのチェックを外す機能をご紹介していきます。

やり方としてはとても簡単で、each()メソッドを使って、それぞれのチェックボックスの “checked” 属性を “true/false” に変えていくだけです。

実装コード

<input class="test-check3" type="checkbox">カレーライス
<input class="test-check3" type="checkbox">ラーメン
<input class="test-check3" type="checkbox">ハンバーグ
<input class="test-check3" type="checkbox">オムライス

<input type="button" onClick="allCheck()" value="全てチェックする">
<input type="button" onClick="allUncheck()" value="全てのチェックを外す">

<script>
function allCheck() {
  const checkboxes1 = $(".test-check3")

  checkboxes1.each(function() {
    $(this).prop("checked", true)
  })
}

function allUncheck() {
  const checkboxes1 = $(".test-check3")

  checkboxes1.each(function() {
    $(this).prop("checked", false)
  })
}
</script>

動作確認用

上記のボタンを押していただくと、全てチェックされている/全てのチェックが外されているのがご確認頂けたかと思います。

prop()メソッドを使ってチェックされている値を取得する機能

続いては、prop()メソッドを使ってチェックされている値を取得する機能をご紹介していきます。

実装方法は、チェックボックスがクリックされるたびに全てのチェックボックスを確認し、チェックが入っているもののみ配列に追加していく、という形になります。

実装コード

<input onChange="checkValue()" class="test-check4" type="checkbox" value="カレーライス">カレーライス
<input onChange="checkValue()" class="test-check4" type="checkbox" value="ラーメン">ラーメン
<input onChange="checkValue()" class="test-check4" type="checkbox" value="ハンバーグ">ハンバーグ
<input onChange="checkValue()" class="test-check4" type="checkbox" value="オムライス">オムライス

<p id="checkedValue"></p>

<script>
function checkValue() {
  const checkboxes2 = $(".test-check4")
  const valueArray = []
  
  checkboxes2.each(function() {
    if ($(this).prop("checked")) {
      valueArray.push($(this).val())
    }
  })
  
  const text = `${valueArray.join(", ")}がチェックされています`
  
  $("#checkedValue").text(text)
}
</script>

動作確認用

prop()メソッドを使ってチェックされている場合のみボタンを有効にする機能

最後に、prop()メソッドを使ってチェックされている場合のみボタンを有効にする機能をご紹介していきます。

実装方法は、チェックボックスがクリックされるたびに全てのチェックボックスの状態を配列に格納し、1つでも “true” があればボタンを有効化する、という形になります。

実装コード

<input onChange="checkValue2()" class="test-check5" type="checkbox">カレーライス
<input onChange="checkValue2()" class="test-check5" type="checkbox">ラーメン
<input onChange="checkValue2()" class="test-check5" type="checkbox">ハンバーグ
<input onChange="checkValue2()" class="test-check5" type="checkbox">オムライス

<input type="button" id="button" disabled="disabled" value="ボタン">

<script>
function checkValue2() {
  const checkboxes3 =$(".test-check5")
  const checkArray = []

  checkboxes3.each(function() {
    checkArray.push($(this).prop("checked"))
  })

  $("#button").prop("disabled", !checkArray.some(value => value == true))
}
</script>

動作確認用

上記を試していただくと、チェックボックスが1つでもチェックされていればボタンが有効化され、全てチェックが外れていればボタンが無効になっているかと思います。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまで、jQueryでのチェックボックスの判定方法それを応用したイベントの実装方法について解説してきましたがいかがでしたか?

今回ご紹介した方法はいずれもコピペでそのまま活用できますので、ぜひ一度試してみてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。