jQueryでクラスセレクタで複数のチェック判定ができていなかった。

jQueryでの話になりますが、

<input type="checkbox" id="chkbx01" class="cb" value="1">ひとつめ
<input type="checkbox" id="chkbx02" class="cb" value="2">ふたつめ
<input type="checkbox" id="chkbx03" class="cb" value="3">みっつめ

とあるとすべてのチェックボックスにチェックを付けたり外したりするのに、クラスが同じなのを利用して

$(".cb").prop("checked",true);

とか

$(".cb").prop("checked",false);

とかで操作できると思います。#でidのセレクタを使って個別に処理しないで済むので楽です。


その逆というか、どれか一つでもチェックがされているかどうかを取るときに

$(".cb").prop("checked")

とすると、trueかfalseで返ってくるんですが、全部の状態を反映したものではない罠があります。
結果的にid="chkbx01"の状態しか取れません。

一般的な挙動としてclassに指定されているもので初めに見つけたものを示すようになっているようです。chkbx01だけの挙動を見ると問題なく動いているように見えてしまうので、他のチェックボックスをいじったときにビビります。


解決の答えを先に言ってしまうと

var checked = false;
$(".cb:checked").each(function(){
  checked = true;
})

でtrueになる場合、少なくとも一つはチェックが付いていることになります。$(".cb").prop("checked") を判定文にいきなりぶち込むと初めの一つしか判定できないので、上のように一段階噛ましてから判定に使う必要があります。


結局、$(".cb:checked")で取れる情報が複数になってしまうので、個別に判断しないといけないわけですね。JavaScript側としては、全部か個別かの判断はできないですから、考えてみれば自然なことかもしれません。

なので複数出てくる情報をeach()で回して処理するしかないようです。他に簡単にできそうなやり方がありそうなんですが、自分には見つけられませんでした。

ただこの処理法だと、全部チェックが付いているかや付いていないなどのパターンも処理できるので、
というか、そのために分けられているのだろうから、融通が利くわけです。たぶん、そうだと思います。カウンタを使って、任意のチェックが2つ以上の判定とかいう処理も可能になってくるわけです（あ、length()とかもあるのか…）。


自分はそもそもセレクタの使い方から調べ始めたので、ここいらの仕様にはちょっと難儀しました。
たくさんのチェックボックスじゃなければidを列挙して処理してしまうところでしたが、数的にそうもいかなかったので。idで前方一致とかでも良かったんだけど、元のソースがそういう感じでもなかったので避けました。

でも、よく考えれば当然なわけですが、クラスで全部チェック入れたり外したりできるのを見てしまうと判定するときもできるのではないかと思っても仕方ないところもあるかもなと思ったり（安易ですが…）。そもそもチェックを付けたり外したりする時にeachとか使わず、再帰的に全部を処理できてしまうところが誤解の元なんだと思います。内部的には回しているはずなので、そこを明示的に書かせて見せるか、隠蔽化してみんなが楽になるかなんでしょうが。


というか、nameで使うなら複数が引っかかってくるのを前提に書かないといけないと思うのですが、
ググってもサンプルが単一のチェックを拾うだけとかのものが多くてしんどかったです。まだidで判断とかなら単一なのでわかるんですが、classを使う以上複数の判定を考えるのが普通でしょう。そうしないのは説明が面倒だから？

タグ：JavaScript