上代码：

<!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. iReport 开发和运行所用版本不一致导致设置字体大小不起作用

    问题:开发环境使用 Win10 + iReport 5.6 ,运行环境使用 Win10 + iReport 5.2 ,设置字体的大小不起作用. 解决方法:开发环境和运行环境一致,都使用 iReport ...

  2. HTML5标签嵌套规则

    × 目录 [1]分类 [2]子元素 [3]总结 前面的话 在html5中,<a>元素的子元素可以是块级元素,这在以前是被认为不符合规则的.本文将详细介绍html5的标签嵌套规则 分类 ht ...

  3. JAVA设计模式《三》

    上一篇为大家介绍了一下关于模板方法模式的实现,后来我发现里面有一点小瑕疵,本篇重新为大家介绍一下关于模板方法模式的实现.另外为大家分享一下关于策略模式的实现. 一.模板方法模式: 对于上一篇为大家介绍 ...

  4. ZOJ 3804 YY's Minions (简单模拟)

    /* 题意:一个矩阵中有 n*m个宠物,每一个宠物都有一个状态, 1醒着的,0睡着的 X离开的!如果这个宠物(醒着的)的周围醒着的个数>3 || <2它就会睡着, 如果这个宠物(睡着的)的 ...

  5. Sparse Filtering 学习笔记（二）好特征的刻画

      Sparse Filtering 是一个用于提取特征的无监督学习算法,与通常特征学习算法试图建模训练数据的分布的做法不同,Sparse Filtering 直接对训练数据的特征分布进行分析,在所谓 ...

  6. Winform（C#.NET）自动更新组件的使用及部分功能实现

    声明:核心功能的实现是由园子里圣殿骑士大哥写的,本人是基于他核心代码,按照自己需求进行修改的.   而AutoUpdaterService.xml文件生成工具是基于评论#215楼 ptangbao的代 ...

  7. 第1/24周 SQL Server 如何执行一个查询

    大家好,欢迎来到第1周的SQL Server性能调优培训.在我们进入SQL Server性能调优里枯燥难懂的细节内容之前,我想通过讲解SQL Server如何执行一个查询来建立基础.这个部分非常重要, ...

  8. 关于WEB Service&WCF&WebApi实现身份验证之WCF篇（1）

    WCF身份验证一般常见的方式有:自定义用户名及密码验证.X509证书验证.ASP.NET成员资格(membership)验证.SOAP Header验证.Windows集成验证.WCF身份验证服务(A ...

  9. 扩展Exception，增加判断Exception是否为SQL引用约束异常方法！

    在设计数据表时,如果将某些列设置为关联其它表的外键,那么如果对其进行增加.修改操作时,其关联表若没有相匹配的记录则报错,或者在对其关联表进行删除时,也会报错,这就是外键约束的作用,当然除了外键还有许多 ...

  10. Jmeter操作手册

    以前没有发pdf的版本,我现在把pdf版本放在百度网盘里面了,需要的童鞋可以去下载:http://pan.baidu.com/s/1bp43jeJ Ksudi Jmeter操作指南 简要说明 Beck ...