CSSだけでcheckboxのチェック数をカウントする

Result

content: counter;を使ってチェック数をカウントする、というもの
JSによるもののように応用は効きませんが、数えるだけなら

css

.languages {/*リセット*/
	counter-reset: characters;
}
input:checked {/*チェックされたらカウント*/
	counter-increment: characters;
}
.total:after {/*疑似要素で任意の場所にカウント結果を表示*/
	content: counter(characters)"個の項目をチェックしています";
}

html

<div class="languages">  
   <div class="input-wrapper">
      <input id="foo" type="checkbox"><label for="foo">foo</label>
   </div>
   <div class="input-wrapper">
      <input id="bar" type="checkbox"><label for="bar">bar</label>
   </div>
   <div class="input-wrapper">
      <input id="piyo" type="checkbox"><label for="piyo">piyo</label>
   </div>
   <div class="input-wrapper">
      <input id="hoge" type="checkbox"><label for="hoge">hoge</label>
   </div>
   <div class="input-wrapper">
      <input id="huga" type="checkbox"><label for="huga">huga</label>
   </div>
</div>  
<p class="total">  
  現在
</p>

can i use

via

https://codepen.io/adamlaki/pen/f1ce9eef0a19069b883da8ec855e4b71

codepen.io