CSSのcounter()関数を利用して選択個数のカウンターです。サンプルは世界の主要都市をlabel要素で列記しています。この都市名をクリックすると、対応するcheckboxの選択がオンになり、選んだ数が加算されます。また、再度クリックすると選択がオフになり、選んだ数が減ります。

サンプル（行きたい都市、行ったことのある都市などとして選択）

アムステルダム

アテネ

バルセロナ

ベルリン

ブリュッセル

ケープタウン

ロサンゼルス

イスタンブール

フランクフルト

ジュネーブ

ルクセンブルグ

マドリード

モントリオール

ムンバイ

ニューデリー

ニューヨーク

オスロ

プラハ

ローマ

サンディアゴ

サンパウロ

選んだ数：

サンプルのhtmlソース

<form action="">
  <fieldset>
    <input type="checkbox" name="fav">
    <label for="php">アムステルダム</label>
  </fieldset>
  <fieldset>
    <input type="checkbox" name="fav">
    <label for="php">アテネ</label>
  </fieldset>

  /* ----中略---- */

  <fieldset>
    <input type="checkbox" name="fav">
    <label for="php">サンディアゴ</label>
  </fieldset>    
  <fieldset>
    <input type="checkbox" name="fav">
    <label for="php">サンパウロ</label>
  </fieldset>
  <div class="result">
    選んだ数：
  </div>
</form>

サンプルのCSSソース

body {
  counter-reset: fav;
}

form fieldset input:checked {
  counter-increment: fav;
}

form .result:after {
  content: counter(fav);
}