jQueryでチェックボックスのチェック状態や値の取得、チェックを付けたり外したり、チェック数の制限などさまざまな方法をご紹介します。
通常のイベントでは動かない、jQueryイベントで追加したチェックボックスの操作方法なども併せてお伝えします。
目次
attr() は使わない
attr()を使ったチェックボックスの操作は不具合が生じるため、本ページではチェックボックスの取得やチェック等の操作にattr()は使っておりません。
※もちろん、それ以外については通常どおりattr()は使いますよ。
チェックボックスの取得
チェックが入っているかの状態や、チェックボックスの値を取得、また複数のチェックボックスの値を配列に格納する方法です。
チェックの状態を取得
チェックの状態を取得する3つの方法を一気にご紹介します。
HTML
|
1 2 3 4 5 6 7 8 |
<p><input type="checkbox" name="check" value="prop" id="prop">：prop</p> <p><input type="checkbox" name="check" value="val" id="val">：val</p> <p><input type="checkbox" name="check" value="is" id="is">：is</p> <!--結果出力用--> <p id="p01"></p> <p id="p02"></p> <p id="p03"></p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
$(function() { // チェックボックスをチェックしたら発動 $('input[name="check"]').change(function() { // prop()でチェックの状態を取得 var prop = $('#prop').prop('checked'); // val()でチェックの状態を取得 var val = $('#val:checked').val(); // is()でチェックの状態を取得 var is = $('#is').is(':checked'); // もしpropがチェック状態だったら if (prop) { // propでチェックと出力 $('#p01').text('propでチェック'); } else { // テキストをリセット $('#p01').text(''); } // もしvalがチェック状態だったら if (val) { $('#p02').text('valでチェック'); } else { $('#p02').text(''); } // もしisがチェック状態だったら if (is) { $('#p03').text('isでチェック'); } else { $('#p03').text(''); } }); }); |
結果（動作サンプル）
下記チェックボックスをチェックすると、その下に出力されます。
:prop
:val
:is
チェックを入れたら対応するテキストが表示され、外すとそのテキストも消えるかと思います。
チェックの状態を取得するには上記3つ方法がありますが、prop()が一般的なので以降はprop()を使っていきます。
冒頭にも述べましたがattr()はチェックが付かなかったりといった不具合が生じるため、チェックの取得や操作には使いません。
value値の取得
次に、チェックボックスのvalue値を取得します。
HTML
|
1 2 3 4 |
<p><input type="checkbox" name="check" value="同意する">:同意する</p> <!--結果出力用--> <p id="p01"></p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function() { // チェックボックスをチェックしたら発動 $('input[name="check"]').change(function() { // もしチェックが入ったら if ($(this).prop('checked')) { // value値を出力 $('#p01').text($(this).val()); } else { // テキストをリセット $('#p01').text(''); } }); }); |
結果（動作サンプル）
下記チェックボックスをチェックすると、その下に出力されます。
:同意する
チェックを入れるとテキストが表示され、外すと消えますね。
今度はチェックボックスのvalue値を取得して表示させました。
以下のコードで、チェックしたチェックボックスの値を取得できます。
$(this).val();
参考：text() でHTML要素にテキストを追加
参考：jQueryの$(this)の使い方
複数の値を配列に格納
複数のチェックボックスのvalue値を配列に格納することも可能です。
HTML
|
1 2 3 4 5 6 |
<p><input type="checkbox" name="city[]" value="高崎">：高崎</p> <p><input type="checkbox" name="city[]" value="前橋">：前橋</p> <p><input type="checkbox" name="city[]" value="太田">：太田</p> <!--結果出力用--> <p id="p01"></p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(function() { // チェックボックスをチェックしたら発動 $('input[name="city[]"]').change(function() { // ①空の配列を用意 var citys = []; // ②チェックが入ったらループ処理 $('input[name="city[]"]:checked').each(function() { // ③value値を配列に格納 citys.push($(this).val()); }); // 格納した配列を表示 $('#p01').text(citys); }); }); |
結果（動作サンプル）
下記チェックボックスをチェックすると、その下に出力されます。
：高崎
：前橋
：太田
チェックを入れると、カンマ区切りの配列形式で出力されるかと思います。
each()を使ってチェックされるたびに、チェックされたチェックボックスから以下の手順で値を取得しています。
説明
①空の配列を用意
複数のvalue値を格納する空の配列を用意します。
each()のループの中で空の配列を用意することで、チェックが外れた時にvalue値が消えるため、チェックを入れるたびに値がどんどん増殖していくことがありません。
②チェックが入ったらループ処理
以下のようにセレクタに:checkedを付けると、チェック状態のチェックボックスのみが取得され、それをeach()でループ処理します。
$(‘input[name=”city[]”]:checked‘) …
③value値を配列に格納
以下のように、①で用意していた配列を格納する変数とpush()を.（ピリオド）で繋いで、ループしながら1つずつ配列に値を格納していきます。
var citys = [];
citys.push( 配列の値 );
チェックのON/OFF
ボタンをクリックするたびに、チェックを入れたり外したりさせます。
チェックボックス単体にチェック
HTML
|
1 2 |
<button type="button" id="btn">クリック！</button> <p><input type="checkbox" name="check" value="同意する">：同意する</p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$(function() { // ボタンをクリックしたら発動 $('#btn').click(function() { // もしチェックが入っていたら if ($('input[name="check"]').prop('checked')) { // チェックを外す $('input[name="check"]').prop('checked', false); // もしチェックが外れていたら } else { // チェックを入れる $('input[name="check"]').prop('checked', true); } }); }); |
結果（動作サンプル）
下記ボタンをクリックすると、チェックボックスにチェックが付きます。
：同意する
クリックするとチェックが付き、その状態でまたクリックすると今度はチェックが外れます。
説明
チェックを付ける
prop()の第二引数をtrueにします。
$( セレクタ ).prop(‘checked’, true)
チェックを外す
prop()の第二引数をfalseにします。
$(セレクタ).prop(‘checked’, false)
複数のチェックボックス全てにチェック
今度は、複数のチェックボックス全てにチェックを入れてみましょう。
HTML
|
1 2 3 4 |
<p><input type="checkbox" name="all" value="all" id="all">：全てにチェック</p> <p><input type="checkbox" name="city[]" value="高崎">：高崎</p> <p><input type="checkbox" name="city[]" value="前橋">：前橋</p> <p><input type="checkbox" name="city[]" value="太田">：太田</p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$(function() { // 「全てにチェック」のチェックボックスをチェックしたら発動 $('#all').change(function() { // もし「全てにチェック」のチェックが入ったら if ($(this).prop('checked')) { // チェックを付ける $('input[name="city[]"]').prop('checked', true); // もしチェックが外れたら } else { // チェックを外す $('input[name="city[]"]').prop('checked', false); } }); }); |
結果（動作サンプル）
下記「すべてにチェック」にチェックを付けると、全てのチェックボックスにチェックが付きます。
：すべてにチェック
:高崎
:前橋
:太田
チェック数を制限する
チェックボックスをチェックできる数を制限し、制限を超えたらチェックできなくなります。
HTML
|
1 2 3 4 |
<p><input type="checkbox" name="city[]" value="高崎">：高崎</p> <p><input type="checkbox" name="city[]" value="前橋">：前橋</p> <p><input type="checkbox" name="city[]" value="太田">：太田</p> <p><input type="checkbox" name="city[]" value="伊勢崎">：伊勢崎</p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$(function() { // チェックボックスをチェックしたら発動 $('input[name="city[]"]').change(function() { // ①チェックが入ったチェックボックスの個数を変数に格納 var len = $('input[name="city[]"]:checked').length; // ②チェックが2つ以上入ったら if (len >= 2) { // ③disabledを付けてチェックできなくする $('input[name="city[]"]').not(':checked').attr('disabled', 'disabled'); // チェックが2つ未満だったら } else { // ④disabledを削除してチェックできるようになる $('input[name="city[]"]').not(':checked').removeAttr('disabled'); } }); }); |
結果（動作サンプル）
下記チェックボックスに2つチェックを付けると、その他チェックボックスがグレーアウトし、チェックできなくなります。
:高崎
:前橋
:太田
:伊勢崎
3つ目のチェックが入らないかと思います。
説明
①チェックが入ったチェックボックスの個数を変数に格納
以下のように:checkedを付けたセレクタをlengthを使って数えます。
$( セレクタ:checked ).length
②チェックが2つ以上入ったら
if文で2以上だったら…という条件分岐を作ります。
③disabledを付けてチェックできなくする
フォームを操作不能にするdisabled属性をattr()で追加します。
$(セレクタ).attr(‘disabled’, ‘disabled’)
ここではattr()大活躍です(笑)
ちなみに、セレクタに続くnot()は、指定した属性や要素を除外するメソッドです。
ここでは:checkedを除外する…つまりチェックされていないチェックボックスだけを取得します。
④disabledを削除してチェックできるようになる
disabled属性を削除して、フォームを通常通り操作可能にする
$( セレクタ ).removeAttr(‘disabled’)
チェックボックスの追加
チェックボックスの動的な追加
チェックボックスをjQueryで動的に追加します。
HTML
|
1 2 3 4 5 6 7 8 9 |
<div class="citys"> <p><input type="checkbox" name="city[]" value="高崎">：高崎</p> <p><input type="checkbox" name="city[]" value="前橋">：前橋</p> <p><input type="checkbox" name="city[]" value="太田">：太田</p> </div> <!--テキストボックス--> <input type="text" id="addCity"> <button type="button" id="btn">クリック！</button> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { // ボタンをクリックしたら発動 $('#btn').click(function() { // ①テキストボックスに入力した都市名を変数に格納 var addCity = $('#addCity').val(); // ②appendで動的にチェックボックスを追加 $('.citys').append('<input type="checkbox" name="city[]" value="'+addCity+'">：'+addCity); }); }); |
結果（動作サンプル）
下記テキストボックスに都市名を入力し、追加ボタンをクリックすると、チェックボックスが動的に生成されます。
:高崎
:前橋
:太田
都市名：
テキストボックスに入力した内容がチェックボックス付きで追加されたかと思います。
ただ、動的に追加したエレメントは通常の方法ではイベントを拾うことができません。
つまり、通常の方法では全然動かないでしょう。
動的に追加したチェックボックスを操作するためには、次にご紹介するon()を使います。
動的に追加したチェックボックスの操作
今まで紹介してきた通常のchageイベントでは、動的に追加したチェックボックスを操作することはできません。
ここで紹介するon()を使った方法でイベントを発動させましょう。
jQuery
|
1 2 3 4 5 |
// 通常のchangeイベント => ×動作しない $('input[name="city[]"]').change(function() { // on()を使ったchangeイベント => ○動作する $(document).on('change', 'input[name="city[]"]', function() { |
説明
以下のようにセレクタ部分にdocumentが指定され、on() の中でセレクタやイベントを指定しています。
$(document).on(‘change’, ‘ 動的に追加したセレクタ ‘ , function () {
通常$(document)の部分は、静的な祖先要素（上記サンプルでは $('.citys')など）を指定しますが、チェックボックスでのイベントの場合$(document) じゃないと動作しませんでした。
チェックボックスを動的生成した場合、よくハマるポイントかと思いますので、注意しましょう。
チェック数を制限する
上限２のチェックボックスに2つチェックをして、一度別のページに言って、またチェックボックスのあるページにもどると、キャッシュのおかげでチェックした２つの項目がチェック済みになっているのですが、なぜかその状態ですと、3つ目がチェックできます。この一連の動作を繰り返すと、4つめ、5つめ…もつけられます。どうしたらよいでしょうか。
コメントありがとうございます。
確かにチェックできてしまいますね。
こちら修正いたしますのでしばらくお待ちいただけますでしょうか。
記事拝見いたしました！
凄く分かりやすかったのですが
自分の記事にコピペしてみました
チェックボックスはしっかり動作しますが
クリック等が押しても動作しません
何かあるんですかね？
回答いただけると幸いです。
ちなみに自分はHTMLです。
ご覧いただきありがとうございます。
クリックしたらチェックが入るサンプルのことでしょうか。
ソースがないのでなんとも言いようがないですが、今一度サンプルを確認いただきミスタイプがないかなどソースを確認されてみてはいかがでしょうか。
頑張ってください。