上代码：

<!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. 使用jasperreports-5.6.0.jar导致的问题

    使用jasperreports-5.6.0.jar导致的问题 Struts2+jasperReport5.6如下设置: <!-- 社员档案 --> <package name=&qu ...

  2. mac下网页中文字体优化

    最近某人吐槽某门户网站在mac下chrome字体超丑,然后发现虽然现在mac用户越来越多,但是大家依然无视mac下的字体差异,于是研究了下mac下网页中的中文字体,和大家分享. 看了一遍国内各大门户和 ...

  3. javascript语句——表达式语句、块语句、空语句和声明语句

    × 目录 [1]表达式 [2]块语句 [3]空语句[4]声明 前面的话 如果表达式在javascript中是短语,那么语句(statement)就是javascript整句或命令.表达式计算出一个值, ...

  4. JSP网站开发基础总结《二》

    有了上一篇的学习,我相信大家对于JSP一定有了一定的认识,从今天开始我们真正开启JSP模式,如果你有HTML的基础,那学起JSP来也就方便了很多了,首先JSP做为网站开发语言,它与HTML有很多相似的 ...

  5. 编译原理LL1文法Follow集算法实现

    import hjzgg.first.First; import java.util.LinkedHashMap; import java.util.Map; import java.util.Set ...

  6. Lua 学习笔记（二）语法、类型、值

    首先Lua执行的每一段代码都称之为“程序块”,一个程序块也就是一连串的语句或命令,例如一个源码文件或一行代码.Lua语句之间并不需要分隔符,如代码中的换行就不起任何作用,当然为了养成编码习惯当两条或者 ...

  7. 给深度学习入门者的Python快速教程 - 番外篇之Python-OpenCV

    这次博客园的排版彻底残了..高清版请移步: https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程: 给深度学习入门者的Python快速教程 - 基础篇 给深度 ...

  8. javaccript学习2

    [Javascript]javascript学习 十六 JavaScript 事件 事件是可以被 JavaScript 侦测到的行为. 事件 JavaScript 使我们有能力创建动态页面.事件是可以 ...

  9. 手机端web学习基础--from慕课网

    web知识零零散散的知道一些,但总感觉不够系统,遇到问题不知道如何解决,因此特此来系统的学习一下web前端的知识.从慕课网的web基础看起.下面学习http://www.imooc.com/learn ...

  10. java中遇到过的String的一些特性

    1.string对象是final的? String str="asdfdf"; str.replace("as",""); System.o ...