読者です 読者をやめる 読者になる 読者になる

まるでちょんまげハリウッド

ちょんはり師匠の生きざまを切り売りしています。

イチオシは転職体験記!それ以外は、いい歳したオッサンの反省です。反省はしますが、後悔はしていません。たぶん。

複数のチェックボックスをjQueryで数える

プログラミング javascript WEBプログラマー

jQueryを使って、チェックされているチェックボックスの数を数えるとき、  

 $(input :checked).length 

こいつを使って、チェックされてるかどうかがわかります。

でも、同じページ内で、ここのチェックボックスと、ここのチェックボックスは分けて数えたいんだよな、ということはありませんか?

私には、ありました。

 $(input :checked).length 

にすると、そのページ内の全部のinputタグでチェックされてるものを取得しちゃうので、

たとえば


辛い食べ物 で好きなもの



甘い食べ物 で好きなもの




というチェックがあるとして、 辛い食べ物、甘い食べ物で、分けようと思っても、分けられないんですよね・・・。

最初、「inputタグ」に、クラス名をつけて、「 :checked 」だけ数えようとしたけど、ダメでした。

結局解決したんですが、あまり自信がなく・・・。

動作確認は、jQuery v1.8.2 で行っております。 具体的なコードは続きからどうぞ。

photo by brickdisplaycase.com

仕方なく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;

これで全体の数が出る・・・はず。

ポイントは、大カッコが名前に付いているので、その部分も含めること。 クォートするのも忘れずに。