jQueryでチェックボックスを操作するさまざまな方法

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryでチェックボックスのチェック状態や値の取得、チェックを付けたり外したり、チェック数の制限などさまざまな方法をご紹介します。

通常のイベントでは動かない、jQueryイベントで追加したチェックボックスの操作方法なども併せてお伝えします。

attr() は使わない

attr()を使ったチェックボックスの操作は不具合が生じるため、本ページではチェックボックスの取得やチェック等の操作にattr()は使っておりません。

※もちろん、それ以外については通常どおりattr()は使いますよ。

チェックボックスの取得

チェックが入っているかの状態や、チェックボックスの値を取得、また複数のチェックボックスの値を配列に格納する方法です。

チェックの状態を取得

チェックの状態を取得する3つの方法を一気にご紹介します。

HTML

jQuery

結果(動作サンプル)

下記チェックボックスをチェックすると、その下に出力されます。

:prop
:val
:is
 
 
 

チェックを入れたら対応するテキストが表示され、外すとそのテキストも消えるかと思います。

チェックの状態を取得するには上記3つ方法がありますが、prop()が一般的なので以降はprop()を使っていきます。

冒頭にも述べましたがattr()はチェックが付かなかったりといった不具合が生じるため、チェックの取得や操作には使いません。

value値の取得

次に、チェックボックスのvalue値を取得します。

HTML

jQuery

結果(動作サンプル)

下記チェックボックスをチェックすると、その下に出力されます。

:同意する
 

チェックを入れるとテキストが表示され、外すと消えますね。

今度はチェックボックスのvalue値を取得して表示させました。

以下のコードで、チェックしたチェックボックスの値を取得できます。

$(this).val();

参考:text() でHTML要素にテキストを追加
参考:jQueryの$(this)の使い方

複数の値を配列に格納

複数のチェックボックスのvalue値を配列に格納することも可能です。

HTML

jQuery

結果(動作サンプル)

下記チェックボックスをチェックすると、その下に出力されます。

:高崎
:前橋
:太田
 

チェックを入れると、カンマ区切りの配列形式で出力されるかと思います。

each()を使ってチェックされるたびに、チェックされたチェックボックスから以下の手順で値を取得しています。

説明

①空の配列を用意

複数のvalue値を格納する空の配列を用意します。

each()のループの中で空の配列を用意することで、チェックが外れた時にvalue値が消えるため、チェックを入れるたびに値がどんどん増殖していくことがありません。

②チェックが入ったらループ処理

以下のようにセレクタに:checkedを付けると、チェック状態のチェックボックスのみが取得され、それをeach()でループ処理します。

$(‘input[name=”city[]”]:checked‘) …

③value値を配列に格納

以下のように、①で用意していた配列を格納する変数とpush().(ピリオド)で繋いで、ループしながら1つずつ配列に値を格納していきます。

var citys = [];
citys.push( 配列の値 );

参考:each()で複数の要素をループ処理

チェックのON/OFF

ボタンをクリックするたびに、チェックを入れたり外したりさせます。

チェックボックス単体にチェック

HTML

jQuery

結果(動作サンプル)

下記ボタンをクリックすると、チェックボックスにチェックが付きます。


:同意する

クリックするとチェックが付き、その状態でまたクリックすると今度はチェックが外れます。

説明

チェックを付ける

prop()の第二引数をtrueにします。

$( セレクタ ).prop(‘checked’, true)

チェックを外す

prop()の第二引数をfalseにします。

$(セレクタ).prop(‘checked’, false)

複数のチェックボックス全てにチェック

今度は、複数のチェックボックス全てにチェックを入れてみましょう。

HTML

jQuery

結果(動作サンプル)

下記「すべてにチェック」にチェックを付けると、全てのチェックボックスにチェックが付きます。

:すべてにチェック
:高崎
:前橋
:太田

チェック数を制限する

チェックボックスをチェックできる数を制限し、制限を超えたらチェックできなくなります。

HTML

jQuery

結果(動作サンプル)

下記チェックボックスに2つチェックを付けると、その他チェックボックスがグレーアウトし、チェックできなくなります。

:高崎
:前橋
:太田
:伊勢崎

3つ目のチェックが入らないかと思います。

説明

①チェックが入ったチェックボックスの個数を変数に格納

以下のように:checkedを付けたセレクタをlengthを使って数えます。

$( セレクタ:checked ).length

②チェックが2つ以上入ったら

if文で2以上だったら…という条件分岐を作ります。

参考:jQueryでのif文の書き方

③disabledを付けてチェックできなくする

フォームを操作不能にするdisabled属性をattr()で追加します。

$(セレクタ).attr(‘disabled’, ‘disabled’)

ここではattr()大活躍です(笑)

ちなみに、セレクタに続くnot()は、指定した属性や要素を除外するメソッドです。

ここでは:checkedを除外する…つまりチェックされていないチェックボックスだけを取得します。

④disabledを削除してチェックできるようになる

disabled属性を削除して、フォームを通常通り操作可能にする

$( セレクタ ).removeAttr(‘disabled’)

チェックボックスの追加

チェックボックスの動的な追加

チェックボックスをjQueryで動的に追加します。

HTML

jQuery

結果(動作サンプル)

下記テキストボックスに都市名を入力し、追加ボタンをクリックすると、チェックボックスが動的に生成されます。

:高崎
:前橋
:太田

都市名:

テキストボックスに入力した内容がチェックボックス付きで追加されたかと思います。

参考:append() で子要素の最後に追加

ただ、動的に追加したエレメントは通常の方法ではイベントを拾うことができません。

つまり、通常の方法では全然動かないでしょう。

動的に追加したチェックボックスを操作するためには、次にご紹介するon()を使います。

動的に追加したチェックボックスの操作

今まで紹介してきた通常のchageイベントでは、動的に追加したチェックボックスを操作することはできません。

ここで紹介するon()を使った方法でイベントを発動させましょう。

jQuery

説明

以下のようにセレクタ部分にdocumentが指定され、on() の中でセレクタやイベントを指定しています。

$(document).on(‘change’, ‘ 動的に追加したセレクタ ‘ , function () {

通常$(document)の部分は、静的な祖先要素(上記サンプルでは $('.citys')など)を指定しますが、チェックボックスでのイベントの場合$(document) じゃないと動作しませんでした。

チェックボックスを動的生成した場合、よくハマるポイントかと思いますので、注意しましょう。

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメント

  1. 村上たあな より:

    チェック数を制限する

    上限2のチェックボックスに2つチェックをして、一度別のページに言って、またチェックボックスのあるページにもどると、キャッシュのおかげでチェックした2つの項目がチェック済みになっているのですが、なぜかその状態ですと、3つ目がチェックできます。この一連の動作を繰り返すと、4つめ、5つめ…もつけられます。どうしたらよいでしょうか。

    1. flatFlag より:

      コメントありがとうございます。
      確かにチェックできてしまいますね。
      こちら修正いたしますのでしばらくお待ちいただけますでしょうか。

  2. HIROORE より:

    記事拝見いたしました!

    凄く分かりやすかったのですが
    自分の記事にコピペしてみました

    チェックボックスはしっかり動作しますが
    クリック等が押しても動作しません

    何かあるんですかね?
    回答いただけると幸いです。
    ちなみに自分はHTMLです。

    1. flatFlag より:

      ご覧いただきありがとうございます。
      クリックしたらチェックが入るサンプルのことでしょうか。
      ソースがないのでなんとも言いようがないですが、今一度サンプルを確認いただきミスタイプがないかなどソースを確認されてみてはいかがでしょうか。
      頑張ってください。

コメントを残す

*