CSSだけでcheckboxのチェック数をカウントする | かちびと.net

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>

[kathew]

content: counter; そんなものもあったなぁ…。用途の分からないプロパティだったけど、こんな使い方があるのか。JavaScriptで書くよりコード量が圧倒的に少なくて素敵

[junichi_y]

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

[damdom]

ちょっと必要なときに使えそう。