こんにちは、ライターのマサトです！今回は、jQueryからフォームでよく使われるcheckbox要素を制御するためのプログラミング手法について学習をしていきましょう！
この記事では、
- 「checkbox」とは？
- checkboxの使い方
という基本的な内容から、
- checkboxのvalue値を取得
- 「change」でイベント処理を行う
- checkboxの状態を取得
などの応用的な使い方に関しても解説していきます。この記事で、「checkbox要素」の制御方法をしっかり学習して自分のスキルアップを目指しましょう！
「checkbox」とは？
それでは、最初に「checkbox要素」について基本的な知識から学習を進めていきましょう！「checkbox要素」は、一般的なフォーム内で使われるものでユーザーに複数の選択肢を提供する役割があります。
例えば、以下のようなcheckbox要素を見たことがある人も多いのではないでしょうか。
クリックやタッチ操作によって、チェックを「入れたり外したり」ができるようになっています。この時に、jQuery側でユーザーがチェックした項目を取得できるメソッドがいくつか用意されているのです。
本記事では、この「checkbox要素」をjQuery側から操作するための基本から応用技まで詳しく解説するのでぜひ参考にしてみてください！
checkboxの使い方
最初は、checkbox要素の基本的な使い方から詳しく見ていきましょう！一般的なcheckboxの書き方からjQuery側でチェックを意図的に入れる方法までを学んでいきます。
基本的なcheckboxの書き方
それでは最初にcheckboxをどのように記述するのかを見ていきましょう！checkboxの要素自体は四角のアイコンだけなので、通常は文字列と一緒に記述するのが基本となります。
次のサンプル例を見てください！
<input type="checkbox" name="sample" value="1">サンプル１
「type属性」にcheckboxを設定することで、自動的にcheckbox要素に変化します。サーバーへ送信する際は「name属性・value属性」の値がペアになって送られることになります。
また、複数のcheckbox要素に「同じname属性」を付与することでグループ化することもできます。
<!— グループ１ --> <input type="checkbox" name="sample" value="1">サンプル１ <input type="checkbox" name="sample" value="2">サンプル２ <input type="checkbox" name="sample" value="3">サンプル３ <!— グループ２ --> <input type="checkbox" name="test" value="1">テスト１ <input type="checkbox" name="test" value="2">テスト２ <input type="checkbox" name="test" value="3">テスト３
複数のcheckboxが多くなりそうな時は、グループ化してデータを整理することが重要になります。
prop()を使ってチェック（checked）を設定する方法
jQuery側からcheckbox要素にチェックを入れる方法について見ていきましょう！
実は、checkbox要素は「checked」プロパティを付与することで、あらかじめチェックが入った状態を作ることができます。
<input type="checkbox" name="sample" value="1" checked>サンプル１
このようにinputタグ内に「checked」プロパティを記述するだけでチェックが入った状態になります。この仕組みを利用すれば、jQuery側からチェックを入れるのも簡単です。
そこで、HTML要素のプロパティを操作するには、jQueryの標準で提供されている「prop()」メソッドが簡単です。次のサンプル例を見てください！
$('input').prop('checked', true);
この例では、input要素に対して「checked」プロパティを付与するように設定しているのが分かります。これによりcheckbox要素にはチェックが入ることになるわけです。
ちなみに、「prop()」について基本から応用技までを次の記事で詳しくまとめているので、ぜひ参考にしてみてください！
checkboxのvalue値を取得
ここからはcheckbox要素にチェックを入れた項目の「value値」を取得する方法について学んでいきましょう！
そこで、まずは以下のようなcheckbox要素を用意します。
<input type="checkbox" name="sample" value="1">サンプル１ <input type="checkbox" name="sample" value="2">サンプル２ <input type="checkbox" name="sample" value="3">サンプル３ <button>ボタン</button>
この例では、3つのcheckbox要素と1つのボタンが配置されています。このボタンをクリックした時に、チェックされているすべての「value値」を取得するようにしてみましょう。
value値の取得は「val()」メソッドを使えば簡単に取得できるのですが、「each()」を使ってループさせるのがポイントです。次のサンプル例を見てください！
$('button').click(function() {
//すべてのチェック済みvalue値を取得する
$('input:checked').each(function() {
var r = $(this).val();
console.log(r);
})
})
この例では、クリックイベント処理の中でeach()メソッドによるループ処理を記述しています。これにより、チェック済みの項目をすべて取得することができます。
また、セレクタ指定を「$(‘input:checked’)」のように記述してチェック済み（checked）だけを指定するのが重要です。もちろん、checkbox要素をグループ化している場合には、「$(‘input[name=”sample”]:checked’)」のように限定しても良いでしょう。
「change」でイベント処理を行う
この章では、「change」イベント処理について学んでいきましょう！「change」イベント処理は、一般的にフォーム部品に何か変化があった時に任意の処理を実行できるのが特徴です。
checkbox要素の場合だと、ユーザーがチェックを入れるか外したタイミングで処理を実行することが可能になります。次のサンプル例を見てください！
$('input').change(function() {
$('input:checked').each(function() {
var r = $(this).val();
console.log(r);
})
})
この例は、前章のクリックイベントをchangeイベント処理に置き換えたものになります。このように記述すると、チェックを入れる度に選択した項目のvalue値を取得できるようになります。
複数チェックを入れた場合でも、同時にすべてのvalue値を取得できるので覚えておきましょう！
checkboxの状態を取得
ここからは、checkbox要素の「状態」を取得するための各種メソッドについて詳しく見ていきます！状態の取得とは、チェックが入っているかどうかを判定するという意味で、主に「prop()」「is()」がよく使われます。
prop()を使って状態を取得する方法
まずは「prop()」メソッドを使って、checkbox要素の状態を確認する方法を見ていきましょう。prop()は冒頭でも紹介したように、jQuery側からチェックを入れることができるメソッドです。
しかし、他にもチェックが入っているかどうかをjQuery側から判断する際にもよく使われるメソッドなのです。次のサンプル例を見てください！
$('input').change(function() {
$('input:checked').each(function() {
var r = $(this).prop('checked');
console.log(r);
})
})
この例では、changeイベント処理の中でeach()を使ってprop()を実行しているのが分かりますね。「prop(‘checked’)」と記述することで、チェック済みなら「true」が取得できるわけです。
is()を使って状態を取得する方法
次に、「is()」メソッドを使って状態を取得してみましょう！基本的な使い方は「prop()」メソッドとほとんど同じなのですが、引数の指定方法が少し違います。次のサンプル例を見てください！
$('input').change(function() {
$('input:checked').each(function() {
var r = $(this).is(':checked');
console.log(r);
})
})
注目すべきはis()メソッドの書き方です！引数には「checked」ではなく「:（コロン）」を付与した「:checked」になるので注意が必要です！
これは、prop()が属性やプロパティ名を引数に指定するのに対して、is()はセレクタ指定を行うという点に違いがあるからです。
まとめ
今回は、jQueryからcheckbox要素を操作するためのプログラミング手法について学びました！最後に、もう一度ポイントをおさらいしておきましょう！
- チェック済み、未チェックを設定するには「prop()」メソッドを使う
- value値を取得するには「val()」メソッド使う
- checkbox要素の状態を確認するには「prop()」「is()」を使う
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
