jQueryを使って、チェックされているチェックボックスの数を数えるとき、
$(input :checked).length
こいつを使って、チェックされてるかどうかがわかります。
でも、同じページ内で、ここのチェックボックスと、ここのチェックボックスは分けて数えたいんだよな、ということはありませんか?
私には、ありました。
$(input :checked).length
にすると、そのページ内の全部のinputタグでチェックされてるものを取得しちゃうので、
たとえば
辛い食べ物 で好きなもの
甘い食べ物 で好きなもの
というチェックがあるとして、 辛い食べ物、甘い食べ物で、分けようと思っても、分けられないんですよね・・・。
最初、「inputタグ」に、クラス名をつけて、「 :checked 」だけ数えようとしたけど、ダメでした。
結局解決したんですが、あまり自信がなく・・・。
動作確認は、jQuery v1.8.2 で行っております。 具体的なコードは続きからどうぞ。
仕方なくdivでくくって数えることにしました。
もっとスマートな書き方あるんだろうけど、とりあえず間に合ったので備忘録的に書いておりますよ。
なお、サンプルは置いておりません。
(はてなの仕様が変わって書きなおすのがめんどくさかった。)
<script type="text/javascript"> function countCB(){ var hotfoods = $('#hot :checked').length; var sweetfoods = $('#sweets :checked').length; if(hotfoods > 0) { var mes1 = '好きな辛い食べ物のチェックは'+hotfoods+'\n'; } else { var mes1 = '好きな辛い食べ物のチェックは・・・ない?\n'; } if(sweetfoods > 0) { var mes2 = '好きな甘い食べ物のチェックは'+sweetfoods; } else { var mes2 = '好きな甘い食べ物のチェックは・・・ない?'; } alert(mes1+mes2); } </script> <div id="hot"> 辛い食べ物<br> <label><input type="checkbox" name="foods" value="1" >カレー</label> <label><input type="checkbox" name="foods" value="2" >唐辛子せんべえ</label> <label><input type="checkbox" name="foods" value="3" >地獄ラーメン</label> </div> <div id="sweets"> 甘い食べ物<br> <label><input type="checkbox" name="foods" value="4">チョコ</label> <label><input type="checkbox" name="foods" value="5">アイス</label> <label><input type="checkbox" name="foods" value="6">宇治金時</label> </div> <input type="button" value="数を数える" onClick="countCB()">
ノークレーム、ノータリーン。
そうです、脳足りてないので。
追記:チェックの入ったチェックボックス、全体の数を数える場合。
要素の数を数えるのは、lengthを使う。
数え方の例:
$("[name='foods[]']:checked").length;
これで全体の数が出る・・・はず。
ポイントは、大カッコが名前に付いているので、その部分も含めること。 クォートするのも忘れずに。