JSFiddle - React, Tailwind, and code Playground

by Vo Tai Tri

HTML

<input type=checkbox> checkbox #1<br>
<input type=checkbox> checkbox #2<br>
<input type=checkbox> checkbox #3<br>
 
<br>Checked: <b id=tickedBoxCount></b>
<br>Unchecked: <b id=unTickedBoxCount></b>

CSS

body{
  counter-reset: tickedBoxCount, unTickedBoxCount;
}
input[type='checkbox']{
  counter-increment: unTickedBoxCount;
}
input[type='checkbox']:checked{
  counter-increment: tickedBoxCount;
}
#tickedBoxCount::before{
  content: counter(tickedBoxCount);
}
#unTickedBoxCount::before{
  content: counter(unTickedBoxCount);
}
b{
  color: red;
}