CSSカウンター

css カウンターは css3 で、最新のブラウザーでのみ有効です。
counter-reset: 特定のセレクターの出現数に対するカウンターの値を設定します。デフォルトは 0 です。 カウンタを定義するだけで、初期値を定義できます。デフォルトは 0 です

counter-increment: 特定のセレクターが表示されるたびにカウンタ increment を設定します。デフォルトの増分は 1 です。

demo

css はカウントと

css

 body{
            margin: 0;
            counter-reset: increment;
        }
        input{
            border: none;
            margin: 0;
            padding: 0;
        }
        .number1 input[type=checkbox]:checked{
            counter-increment:increment 20;
        }
        .number2 input[type=checkbox]:checked{
            counter-increment:increment 30;
        }
        .number3 input[type=checkbox]:checked{
            counter-increment:increment 40;
        }
        .number4 input[type=checkbox]:checked{
             counter-increment:increment 50;
         }
        .number5 input[type=checkbox]:checked{
            counter-increment:increment 60;
        }
        .sum:after{
            content: counter(increment);

        }

html

<label class="number1"><input type="checkbox">20</label>+<label class="number2"><input type="checkbox">30</label>+<label class="number3"><input type="checkbox">40</label>+<label class="number4"><input type="checkbox">50</label>+<label class="number5"><input type="checkbox">60</label>=<p class="sum"></p>

を実装しています。 CSS カウンター関連の記事の詳細については、PHP 中国語 Web サイトに注目してください。