上代码：

<!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()插入计数器

用css计算选中的复选框有几个的更多相关文章

  1. 选中没有选中的复选框，匹配含有某个字符串的正则，json取值的两种方法，把变量定义在外面跟里面的区别

    一.筛选没有选中的复选框:not("input:checked") 二.匹配有VARCHAR的字符串:".*VARCHAR.*?" 三.json取值的两种方法 ...

  2. 自定义常用input表单元素一：纯css 实现自定义checkbox复选框

    最下面那个是之前写的  今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...

  3. js根据选中的复选框，隐藏那一行

    如图,选择复选框,点击“隐藏”按钮,隐藏选中行 1.JavaScript代码: function getCheckedIds() { var checkedSubject = $('#showSbgl ...

  4. bootstrap table 复选框选中后，翻页不影响已选中的复选框

    使用的 jquery版本为 2.1.1 在项目中发现bootstrap table的复选框选中后,翻页操作会导致上一页选中的丢失,api中的 bootstrapTable('getSelections ...

  5. jQuery分别获取选中的复选框值

    function jqchk(){  //jquery获取复选框值   var s='';   $('input[name="aihao"]:checked').each(func ...

  6. element表格点击行即选中该行复选框

    关键代码如下 <el-table ref="multipleTable" :data="tableData" highlight-current-row ...

  7. 纯css美化单选、复选框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 设置checkbox不能选中，复选框不能选中

    Web开发:设置复选框的只读效果 在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的&qu ...

  9. ztree点击节点实现选中/取消复选框

    效果 代码 在js中初始化tree时 设置复选框操作只影响子节点 复选框事件,想怎么处理就怎么处理

随机推荐

  1. .NET 程序启动调试器 .NET 测试代码耗费时间

    有些场景的.NET程序,不容易设置断点,可以用下面的方法,在.NET代码中增加启动调试器的代码: if (!Debugger.IsAttached) Debugger.Launch(); .cshar ...

  2. poj1703Find them, Catch them（并查集以及路径压缩）

    /* 题目大意:有两个不同的黑帮,开始的时候不清楚每个人是属于哪个的! 执行两个操作 A a, b回答a, b两个人是否在同一帮派,或者不确定 D a, b表示a, b两个人不在同一个帮派 思路:利用 ...

  3. 如何用Python输出PPT中的文字信息

    在这里,会用到win32com模块 模块下载地址:http://sourceforge.net/projects/pywin32/files/pywin32/ 代码如下: import win32co ...

  4. Fiddler的学习

    以下内容转自:http://www.cnblogs.com/TankXiao/archive/2012/02/06/2337728.html 仅为查找方便而复制~~ Fiddler是最强大最好用的We ...

  5. [OpenCV] Samples 08: edge

    Canny edge detector 效率高,效果可控. TrackBar的使用. 技巧:gray找边缘后作为mask去CopyTo(). #include "opencv2/core/u ...

  6. 在office2010怎么样删除图片背景

    在网络上找到一张图片,当你只想要某些部分,但不想要图片的背景的时候,应该怎么办呢,当然你可以借助专业的图片处理工具,如:PS,然后对于大多数没有接触过此软件的同学来说要将背景去掉,实属不易,有没有简单 ...

  7. EnjoyCSS – 在线的，先进的 CSS3 代码生成器

    EnjoyCSS 是一款先进的 CSS3 代码生成工具,可以让你摆脱日常的编码.它方便和易于使用的用户界面允许您快速,无需编码就可以调节出丰富的图形样式.您将能够玩转所有的 EnjoyCSS 参数,就 ...

  8. 优秀教程：使用 CSS3 动画实现的超炫的过渡特效

    Codrops 最近分享了一些很酷的图片切换灵感.有三种不同的用例:小的图像幻灯片,大标题幻灯片以及使用透明背景的产品幻灯片.状态转换使用 CSS 动画完成,我们能够定义从任何方向进来的图片的行为. ...

  9. noip模拟赛 好元素 哈希表的第一题

    这是一道关于 题2好元素 2s [问题描述] 小A一直认为,如果在一个由N个整数组成的数列{An}中,存在以下情况: Am+An+Ap = Ai (1 <= m, n, p < i < ...

  10. Dapper小型ORM的使用（随便吐槽下公司）

    近来公司又有新项目要做,之前做项目用过蛮多ORM,包括ef,NetTiers,ServiceStack.OrmLite等ROM,每种ORM都有一定的坑(或者说是使用者的问题吧~~).用来用去都觉的有一 ...