使用CSS计数器动态获得选中元素个数实例页面

回到相关文章 »

代码:

CSS代码:
body {
  counter-reset: icecream;
}
input:checked {
  counter-increment: icecream;
}
.total::after {
  content: counter(icecream);
}
                
HTML代码:
<strong>下面中国十大冰淇淋你吃过几个?</strong>
<ol>
    <li><input type="checkbox" id="icecream1"><label for="icecream1">哈根达斯</label></li>
    <li><input type="checkbox" id="icecream2"><label for="icecream2">和路雪wall's</label></li>
    <li><input type="checkbox" id="icecream3"><label for="icecream3">八喜冰淇淋</label></li>
    <li><input type="checkbox" id="icecream4"><label for="icecream4">DQ冰淇淋</label></li>
    <li><input type="checkbox" id="icecream5"><label for="icecream5">蒙牛冰淇淋</label></li>
    <li><input type="checkbox" id="icecream6"><label for="icecream6">雀巢冰淇淋</label></li>
    <li><input type="checkbox" id="icecream7"><label for="icecream7">伊利冰淇淋</label></li>    
    <li><input type="checkbox" id="icecream8"><label for="icecream8">乐可可冰淇淋</label></li>
    <li><input type="checkbox" id="icecream9"><label for="icecream9">新城市冰淇淋</label></li>
    <li><input type="checkbox" id="icecream10"><label for="icecream10">明治MEIJI</label></li>
</ol>

你总共选择了 <strong class="total"></strong> 款冰淇淋!

效果:

下面中国十大冰淇淋你吃过几个?

你总共选择了 款冰淇淋!