今回の記事は、
- jQueryでチェックボックスの状態を判定したい
- チェックボックスを使って色々な機能を実装したい
という方に向けた記事になっています。
この記事の前半では、「jQueryでのチェックボックスの判定方法」について解説しつつ、後半では「チェックボックスの判定機能を利用したイベントの実装方法」をご紹介させて頂きます。
フリーランス案件を探すならこのエージェント！
 |  |  | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社Hajimari |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約28,000件 | 約3,300件 | 約4,200件 |
| 平均単価 | 68.2万円 | 72.2万円 | – |
| 最高月収 | 145万円 | 200万円 | 176万円 |
| 特徴 | ・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心 | ・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20% | ・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い |
| 紹介企業例 | ・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース | ・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など | ・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など |
| 説明記事 | |||
| 公式サイト |
転職を考えているならこのエージェント！
 |  |  | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社リブセンス |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約13,000件 | 約800件 ※非公開求人が多い | – ※ドラフト制のため、対象外 |
| 年齢層 | 20代：◎ 30代：〇 40代：〇 | 20代：〇 30代：〇 40代：△ | 20代：〇 30代：〇 40代：〇 |
| 特徴 | ・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績 | ・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現 | ・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる |
| 紹介企業例 | ・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など | ・DMM.com ・Money Forward ・SmartHR など | ・メルカリ ・ZOZOテクノロジーズ ・freee など |
| 説明記事 | |||
| 公式サイト |
チェックボックスがチェックされているか判定する方法
それではまずは、チェックボックスがチェックされているかどうかを判定する方法を見ていきましょう。
こちらの記事（【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()メソッドを使って実装できる様々な機能
今回ご紹介する機能は以下の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つでもチェックされていればボタンが有効化され、全てチェックが外れていればボタンが無効になっているかと思います。
最後に
さて、ここまで、jQueryでのチェックボックスの判定方法とそれを応用したイベントの実装方法について解説してきましたがいかがでしたか？
今回ご紹介した方法はいずれもコピペでそのまま活用できますので、ぜひ一度試してみてくださいね。
このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
