CSS实现checkbox计数

效果:

计数前:

计数后:

代码:

html:

<div class="choose">
  <label><input type="checkbox" />重庆</label>
  <label><input type="checkbox" />北京</label>
  <label><input type="checkbox" />广州</label>
  <label><input type="checkbox" />成都</label>
  <label><input type="checkbox" />云南</label>
  <label><input type="checkbox" />上海</label>
</div>
<div>你选择了<span class="count"></span>个城市</div>

css:

.choose{
  counter-reset:city;
}
.choose input:checked{
  counter-increment:city;
}
.count::before{
  content:counter(city);
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,843评论 1 92
  • 亲爱的自己, 你还好么? 她们都说你太过忧伤 请你给自己一点阳光 我知道你不想伪装 你没有想象的那么坚强 但是你要...
    姝瑾儿阅读 322评论 41 48
  • “你一直看着我看啥?”宁觅跟室内设计师沟通完,一转头便看见齐华正笑眯眯地望着自己,这小子见鬼了,中午吃饭接完个电话...
    暖暖加糖阅读 586评论 1 8
  • 在过去,Web被人们定位为展示与发布信息最“快”的通用平台,在进入移动互联时代后,除了媒体、营销等这些以“快”著称...
    Sandy0503阅读 547评论 0 3
  • 一、看到牌时的感受 施舍者华丽的服饰和星币感觉很丰盛,受施者虽然也穿着讲究可是受施的感觉是很凄凉的。 二、读牌 1...
    A飞舞的蒲公英阅读 347评论 0 0