上代码：

<!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. 蓝牙4.0 BLE基础之vdd检测new

    外部ADC通道,我们现在用的是A0脚,也就是P00通道 把它设置成输出的一个模式.在程序中设置,代码如下: #include <ioCC2540.h> #define HAL_ADC_RE ...

  2. 【WP 8.1开发】自定义（RAW）通知的使用

    继续前面的话题,还是推送通知.上一篇文章中遗留了RAW通知的推送没有给各位演示,特特地留到现在,不为别的,只为这个RAW通知有点意思,玩起来会比较有意思.官方文档将RAW通知译为“原始通知”,这里还是 ...

  3. Android入门(十八)服务

    原文链接:http://www.orlion.ga/674/ 一.定义一个服务 创建一个项目ServiceDemo,然后在这个项目中新增一个名为 MyService的类,并让它继承自 Service, ...

  4. Request 接收参数乱码原理解析一：服务器端解码原理

    “Server.UrlDecode(Server.UrlEncode("北京")) == “北京””,先用UrlEncode编码然后用UrlDecode解码,这条语句永远为true ...

  5. Hard Drive Inspector Pro 4.26.208(硬盘检测工具)简体中文特别版

    Hard Drive Inspector监视硬盘错误并且接收警报,检查变化并实施诊断.例如:驱动器旋转时间增加以及数次重试才能运转驱动器通常意味着发动机和/或者轴存在可以导致数据丢失的错误.HardD ...

  6. Cardinal：一个用于移动项目开发的轻量 CSS 框架

    Cardinal 是一个适用于移动项目的 CSS 框架,包含很多有用的默认样式.矢量字体.可重用的模块以及一个简单的响应式模块系统.Cardinal 提供了一种在多种移动设备上实现可伸缩的字体和布局的 ...

  7. Apache+MySQL+PHP开发环境的搭建（二）

    通过自主选择相应的apache,mysql,php等软件,根据自己的应用开发需求进行安装.此方法搭建的环境自主性较强,搭建过程较为复杂,繁琐. 1.所需软件: Apache: http-2.2.22- ...

  8. 聚合索引(clustered index) / 非聚合索引(nonclustered index)

    以下我面试经常问的2道题..尤其针对觉得自己SQL SERVER 还不错的同志.. 呵呵 很难有人答得好.. 各位在我收集每个人擅长的东西时,大部分都把SQL SERVER 标为Expert,看看是否 ...

  9. BitCoinJ之Hello World示例程序

    简介 比特币(BitCoin)是一种基于区块链(BlockChain)技术的数字化货币. 本文介绍了使用基于Java语言的BitCoinJ API实现一个简单的收取和支付比特币的示例程序. 开发环境 ...

  10. JS魔法堂：再识ASCII实体、符号实体和字符实体

    一.前言            相信大家都熟悉通过字符实体   来实现多个连续空格的输入吧!本文打算对三类HTML实体及JS相关操作作进一步的整理和小结,若有纰漏请大家指正,谢谢. 二.初识HTML实 ...