代码改变世界

用css计算选中的复选框有几个

2016-09-30 11:10  改吧  阅读(425)  评论(0)  编辑  收藏  举报

上代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>计数</title>
    <style type="text/css">
    body{
        counter-reset: fruit;

    }
    input:checked{
        counter-increment:fruit;
    }
    .total:after{
        content:counter(fruit);
    }
    </style>
</head>
<body>
    <input type="checkbox" name='fruit'>水果
    <input type="checkbox" name='fruit'>水果
    <input type="checkbox" name='fruit'>水果
    <input type="checkbox" name='fruit'>水果
    <input type="checkbox" name='fruit'>水果
    <input type="checkbox" name='fruit'>水果
    <input type="checkbox" name='fruit'>水果
    <input type="checkbox" name='fruit'>水果
    <input type="checkbox" name='fruit'>水果
    <p class='total'></p>
</body>
</html>

counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。

counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。

counter()插入计数器