今回の記事は、
- jQueryでチェックボックスの状態を判定したい
- チェックボックスを使って色々な機能を実装したい
という方に向けた記事になっています。
この記事の前半では、「jQueryでのチェックボックスの判定方法」について解説しつつ、後半では「チェックボックスの判定機能を利用したイベントの実装方法」をご紹介させて頂きます。
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!
チェックボックスがチェックされているか判定する方法
それではまずは、チェックボックスがチェックされているかどうかを判定する方法を見ていきましょう。
こちらの記事(【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でのチェックボックスの判定方法とそれを応用したイベントの実装方法について解説してきましたがいかがでしたか?
今回ご紹介した方法はいずれもコピペでそのまま活用できますので、ぜひ一度試してみてくださいね。
このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。