使用css伪类，实现同类型复选框计数的效果

最新推荐文章于 2023-06-25 10:40:25 发布

weixin_34355881

最新推荐文章于 2023-06-25 10:40:25 发布

阅读量105

点赞数

原文链接：https://segmentfault.com/a/1190000012644751

版权

开始啦

最近发现一个css的小技巧。在以往，当我想要获取checkbox的数据数量的时候，常规的做法是使用js遍历checkbox数组，定义变量达到统计数量的效果。现在使用css完全可以实现相同的效果，简单便捷，在不操作DOM的情况下达到目的，嘻嘻

代码块

这里贴出相关代码，希望能帮到大家：

<html>
    <head>
        <meta charset="UTF-8">
        <title>伪类计数</title>
        <style type="text/css">
            .box{
                /*创建计数器num*/
                counter-reset: num; 
            }
            input:checked{        
                /*递增计数器*/
                counter-increment: num;
            }
            .count::before{
                /*统计*/
                content:counter(num);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <label><input type="checkbox" /></label>
            <label><input type="checkbox" /></label>
            <label><input type="checkbox" /></label>
        </div>
        <p class="count">计数</p>
    </body>
</html>