上代码：

<!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. LigerUI Tree

    <!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=utf ...

  2. SQL Server 2014新特性-原生备份加密

    注:本篇文章是IT68找我的约稿,原文地址:http://tech.it168.com/a2014/0610/1633/000001633147.shtml       SQL Server 2014 ...

  3. Surface Normal Vector in OpenCascade

    Surface Normal Vector in OpenCascade eryar@163.com 摘要Abstract:表面上某一点的法向量(Normal Vector)指的是在该点处与表面垂直的 ...

  4. Caffe + Ubuntu 14.04 64bit + CUDA 6.5 配置说明

    本文安装显卡驱动的方式已经过时, 最新安装说明请参考发布在Gist上的这篇文章,如有任何疑问,仍然欢迎在本文下留言 :P (本文档使用同一块NVIDIA显卡进行显示与计算, 如分别使用不同的显卡进行显 ...

  5. 【原创】.NET读写Excel工具Spire.Xls使用(2)Excel文件的控制

                  本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html .NET读写Excel工具Spire.Xls使用文章 ...

  6. python--基础学习（一）开发环境搭建，体验HelloWorld

    python学习之前 最近想用python写爬虫,由于之前没接触过,所以从零开始,找了技术博文大概了解下基础. 印象比较深的是"python你不去认识它,可能没什么,一旦你认识了它,你就会爱 ...

  7. Moon River

    读书笔记系列链接地址http://www.cnblogs.com/shoufengwei/p/5714661.html.        昨晚无意中听到了一首英文歌曲,虽不知其意,但是瞬间就被优美的旋律 ...

  8. 使用 CSS3 制作一组超时尚的动画按钮效果

    通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...

  9. SQL Server在执行SQL语句时，表之间驱动顺序对性能的影响

    环境:SQL Server2012 SP3 企业版,开发服务器,并没有什么负载,全库索引统一Rebuild过 经反复执行验证过, 不算太复杂的SQL(存储过程中代入参数抠出来的SQL代码) 默认情况下 ...

  10. ehcache报错

    jfinal2.0+tomcat7+ehcache2.6.11+Linux Linux version 2.6.18-164.el5 (mockbuild@x86-002.build.bos.redh ...