伪元素实现多选框选中增加数字

点击多选框统计点击的有多少个，这样的功能一般是由js实现的，原来早有高人利用css实现了这样的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        form{counter-reset: num;}
        input:checked{counter-increment: num;}
        .count:before{content: counter(num);color: #f00;}
    </style>
</head>
<body>
    <form>
        <label>香蕉</label>
        <input type="checkbox" name="" id=""><br>
        <label>苹果</label>
        <input type="checkbox" name="" id=""><br>
        <label>雪梨</label>
        <input type="checkbox" name="" id=""><br>
        <label>葡萄</label>
        <input type="checkbox" name="" id=""><br>
    </form>
    <p>你一共选择了<span class="count"></span>种水果</p>
</body>
</html>

 

posted @ 2017-11-06 22:02  _Jo  阅读(317)  评论(0)  编辑  收藏  举报