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

开始啦

最近发现一个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>

最后

使用场景因人而异啊，第一次更新技术博客，略微有点惶恐

posted @ 2020-06-10 08:33  10年码农  阅读(114)  评论(0)  编辑  收藏  举报