【JS】選択済みのチェックボックスの個数をカウントするスクリプトをjQueryで組んでみた

選択済みのチェックボックスの個数を表示させて欲しいとのリクエストがあったので、Javascript（jQuery）を使って作成してみました。
いつの日かまた使うことがあると思うので、備忘録をかねてご紹介。

選択済みcheckboxをカウントするスクリプト

動作イメージ / デモ

デモ

デモはコチラから。

スクリプトコード

HTML

まずはHTML。単にチェックボックスを並べているだけです。
Pタグでチェックボックスを囲い、カウントする範囲を決めることが出来るようにしています。

今回は <div class="tohokuret"></div> に、結果を表示します。

[html]

訪れたことがある都道府県を選択してください

北海道
青森
岩手
宮城
秋田
山形
福島

[/html]

Javascript

メインのスクリプト。jQuery 必須。
lengthメソッドでカウントします。

[js]

[/js]

わずか数行のスクリプトですが、これで問題なく動作します。

スクリプト解説

以下、軽い説明。

[js]
$('input:checkbox').change(function()
[/js]
チェックボックスが選択/非選択した時のスクリプトとします。

[js]
var cnt = $('#tohoku input:checkbox:checked').length;
[/js]
tohoku IDの、チェック済のチェックボックスのカウントを行います。

[js]
$('div.tohokuret').text('選択：' + cnt + '個');
[/js]
結果を出力。

[js]
.trigger('change');
[/js]

ページ表示時に1回、走らせ、個数を取得する作法。
これがないと、選択時/非選択時に初めて、スクリプトが動作します。

-Javascript,jQuery
-checkbox, length, カウント