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);
}
>

 

引用と参考;https://codepen.io/erdemuslu/pen/QambwW
戻るボタン