-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
阿萨
2018-03-20
来源 ：网络
阅读 1367
评论 0
摘要：最近发现一个css的小技巧。在以往，当我想要获取checkbox的数据数量的时候，常规的做法是使用js遍历checkbox数组，定义变量达到统计数量的效果。现在使用css完全可以实现相同的效果，简单便捷，在不操作DOM的情况下达到目的，这篇CSS+DIV实战教程就来教教你。
最近发现一个css的小技巧。在以往，当我想要获取checkbox的数据数量的时候，常规的做法是使用js遍历checkbox数组，定义变量达到统计数量的效果。现在使用css完全可以实现相同的效果，简单便捷，在不操作DOM的情况下达到目的，这篇CSS+DIV实战教程就来教教你。
代码块
这里贴出相关代码，希望能帮到大家：
<html>
<head>
<meta charset="UTF-8">
<title>伪类计数</title>
<style type="text/css">
.box{
/*创建计数器num*/
counter-reset: num;
}
input:checked{
/*递增计数器*/
counter-increment: num;
}
.count::before{
/*统计*/
content:counter(num);
}
</style>
</head>
<body>
<div class="box">
<label><input type="checkbox" /></label>
<label><input type="checkbox" /></label>
<label><input type="checkbox" /></label>
</div>
<p class="count">计数</p>
</body></html>
最后
使用场景因人而异啊，第一次更新技术博客，略微有点惶恐
希望这篇文章可以帮助到你。总之，同学们，你想要的职坐标IT频道都能找到！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
