2017年12月31日(日)

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

• 0
• 1
• 7
• 34

Result

See the Pen opWdyj by kachibito (@kachibito) on CodePen.

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

css

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

html

foo