【jQuery】チェックボックス 取得とか外すとかよく使うイベント 9選

jQueryで、チェックボックスを操作する動きをいくつかご紹介します。

基本的には、ここに書いてあることを抑えれば、チェックボックスを動的に制御したいことは大抵できるはず！

チェックボックスの取得関連

状態を取得

チェックボックスの状態を取得する方法は３つあります。

１．prop

これが一般的によく使われる方法だと思います。

See the Pen XzLreo by yukifujinami (@yfujifuji) on CodePen.0

こんな感じです。
propは指定した属性の値を真偽値で取得できるものです。

.prop(‘checked’)で、id=”prop” にチェックが入っているかどうかを判定し、入っていたら、テキストを表示、入っていなかったら、テキストを空欄にする、という動作をさせています。

なお、複数マッチしている場合は、最初の要素のみ取得します。
複数取得したい場合は、後述する、each()を使います。

同じようなことができるものに、attr()ってのがありますが、これは使わない方が良いみたいです。
attrはhtml属性を取得、propはjavascriptでの属性を取得します。

attrだとcheckedという属性そのものを探しにいくので、checkedがない場合、「undifined」が返ってきます。
一方、propは真偽値を返してくれるので、true or false で返事をしてくれるんですね。

とにかく、input系の状態をjQueryで取得する際は、attrではなく、propを使うんだ、と覚えてしまいましょう。

２．val

See the Pen LOKPbK by yukifujinami (@yfujifuji) on CodePen.0

続いて、val()で取得する方法です。

チェックが入っている項目の値を取得する方法です。
実際には、チェックされている値を表示させたい場合などは、このやり方が向いていると思います。

３．is

See the Pen Rjzbxa by yukifujinami (@yfujifuji) on CodePen.0

is()は要素集合の中に、一つでも条件が当てはまるものがあれば、trueを返すというものです。
チェックボックスだけではなく、子要素の最初のものだったら、みたいな状態取得にも使えます。

例えば、

$("#sample").click(function(){{
	if ($(this).is(":first-child")) { 
//以下省略

みたいな感じでしょうか。

以上、３つ紹介しましたが、普通に状態を取得するだけだったら、propを使うのが一番手軽でわかりやすいですね。

一つのvalue値を取得

選択したチェックボックスのvalue値を取得する方法です。

See the Pen QOXLZm by yukifujinami (@yfujifuji) on CodePen.0

$(this)って、jQueryでよく使いますが、チェックが入ったそのvalueをピンポイントで取得するってことですね。
単一の値を取得する際はこれでOKです。

複数の値を取得

チェックボックスなので、複数の値を取得したいというケースも多々あると思います。

See the Pen aVgoPe by yukifujinami (@yfujifuji) on CodePen.0

複数の値を取得するには、each()を使います。

前述した通り、propは最初の要素しか取得できません。
jQueryのeach()は、ループ処理（繰り返し処理）をする際に使います。

上記の例では、いずれかのチェックボックスにチェックが入ったら、チェックが入っているものをガサッと取ってきて、それを、each()で、一つ一つチェックが入っている値を取得し、配列に格納する、といった処理を行なっています。

チェックボックスをチェック

ボタンクリックで一つのチェックボックスにチェック

See the Pen KyjPLx by yukifujinami (@yfujifuji) on CodePen.0

上記のように、使い道としては、例えば、別々の設問なんだけれども、ボタンを押したら、それに連動する設問にチェックを自動で入れるみたいな感じでしょうか。

これまで見てきたチェックボックスの処理の発動をボタンクリックに変えているだけなので、それほど難しいものではないですね。

全てにチェック

チェックを入れる動作については、こっちの方が使うケースが多いかもです。

See the Pen gXNOOG by yukifujinami (@yfujifuji) on CodePen.0

結構簡単ですね。nameで指定しているので、それに当てはまる要素に全てチェックを入れたり、外したり、ということです。

チェックできる数を制限する

これもよく使いますね。例えば、投票フォームみたいなのを作った際、10名のうち2名まで投票可能みたいシステム。

See the Pen mqZdJw by yukifujinami (@yfujifuji) on CodePen.0

チェックする数を数えて、数が満たされれば、disabled要素をつけるという内容。

not()は、指定しているものがないものを取得するためのもの。上記のコードでは、checkedがないものを取得してます。

attr 、removeAttr で、disabledをつけたり外したりをしてます。

チェックボックスを追加

こちらは選択肢を動的に増やしていくもの。タスク管理的なwebサービスを作る時とか、こういうのは重宝されますね。

See the Pen JOQjWK by yukifujinami (@yfujifuji) on CodePen.0

要素を追加するappend()を使ってあげれば良いですね。

webサービスとかだと、実際には、追加した要素をデータベースに保存させるような仕組みが必要になるとは思いますが。

jQueryの要素追加メソッドはこちらの記事に詳しくまとめてますので、ぜひ参考にしてください。

「【jQuery】すぐわかる　要素の追加メソッドまとめ」

ちなみに、このように動的に要素を追加した場合、今まで紹介したようなコードではうまく動作しません。
jQueryをそこそこ使っている方はお分かりだと思いますが、on()を使う必要がありますね。

例えば、選択肢のうち１個だけ選択できるように制御したい場合、

See the Pen WXqNEL by yukifujinami (@yfujifuji) on CodePen.0

こんな感じでうまくいきます。

以上、チェックボックスに絡んだjQueryのサンプルコードでした。
ご活用ください！