【jQuery入門】checkboxのchecked設定や取得まとめ!

こんにちは、ライターのマサトです!今回は、jQueryからフォームでよく使われるcheckbox要素を制御するためのプログラミング手法について学習をしていきましょう!

この記事では、

  • 「checkbox」とは?
  • checkboxの使い方

という基本的な内容から、

  • checkboxのvalue値を取得
  • 「change」でイベント処理を行う
  • checkboxの状態を取得

などの応用的な使い方に関しても解説していきます。この記事で、「checkbox要素」の制御方法をしっかり学習して自分のスキルアップを目指しましょう!

「checkbox」とは?

それでは、最初に「checkbox要素」について基本的な知識から学習を進めていきましょう!「checkbox要素」は、一般的なフォーム内で使われるものでユーザーに複数の選択肢を提供する役割があります。

例えば、以下のようなcheckbox要素を見たことがある人も多いのではないでしょうか。
jquery-checkbox-img1
クリックやタッチ操作によって、チェックを「入れたり外したり」ができるようになっています。この時に、jQuery側でユーザーがチェックした項目を取得できるメソッドがいくつか用意されているのです。

本記事では、この「checkbox要素」をjQuery側から操作するための基本から応用技まで詳しく解説するのでぜひ参考にしてみてください!

checkboxの使い方

最初は、checkbox要素の基本的な使い方から詳しく見ていきましょう!一般的なcheckboxの書き方からjQuery側でチェックを意図的に入れる方法までを学んでいきます。

基本的なcheckboxの書き方

それでは最初にcheckboxをどのように記述するのかを見ていきましょう!checkboxの要素自体は四角のアイコンだけなので、通常は文字列と一緒に記述するのが基本となります。

次のサンプル例を見てください!

<input type="checkbox" name="sample" value="1">サンプル1

「type属性」にcheckboxを設定することで、自動的にcheckbox要素に変化します。サーバーへ送信する際は「name属性・value属性」の値がペアになって送られることになります。

また、複数のcheckbox要素に「同じname属性」を付与することでグループ化することもできます。

<!— グループ1 -->
<input type="checkbox" name="sample" value="1">サンプル1
<input type="checkbox" name="sample" value="2">サンプル2
<input type="checkbox" name="sample" value="3">サンプル3

<!— グループ2 -->
<input type="checkbox" name="test" value="1">テスト1
<input type="checkbox" name="test" value="2">テスト2
<input type="checkbox" name="test" value="3">テスト3

複数のcheckboxが多くなりそうな時は、グループ化してデータを整理することが重要になります。

prop()を使ってチェック(checked)を設定する方法

jQuery側からcheckbox要素にチェックを入れる方法について見ていきましょう!

実は、checkbox要素は「checked」プロパティを付与することで、あらかじめチェックが入った状態を作ることができます。

<input type="checkbox" name="sample" value="1" checked>サンプル1

このようにinputタグ内に「checked」プロパティを記述するだけでチェックが入った状態になります。この仕組みを利用すれば、jQuery側からチェックを入れるのも簡単です。

そこで、HTML要素のプロパティを操作するには、jQueryの標準で提供されている「prop()」メソッドが簡単です。次のサンプル例を見てください!

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

この例では、input要素に対して「checked」プロパティを付与するように設定しているのが分かります。これによりcheckbox要素にはチェックが入ることになるわけです。

ちなみに、「prop()」について基本から応用技までを次の記事で詳しくまとめているので、ぜひ参考にしてみてください!

【jQuery入門】prop(attr)の使い方と属性値の取得・設定まとめ!
更新日 : 2019年6月5日

checkboxのvalue値を取得

ここからはcheckbox要素にチェックを入れた項目の「value値」を取得する方法について学んでいきましょう!

そこで、まずは以下のようなcheckbox要素を用意します。

<input type="checkbox" name="sample" value="1">サンプル1
<input type="checkbox" name="sample" value="2">サンプル2
<input type="checkbox" name="sample" value="3">サンプル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()」を使う

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説