使用css偽類,實現同類型複選框計數的效果
阿新 • • 發佈:2018-11-28
開始啦
最近發現一個css的小技巧。在以往,當我想要獲取checkbox的資料數量的時候,常規的做法是使用js遍歷checkbox陣列,定義變數達到統計數量的效果。現在使用css完全可以實現相同的效果,簡單便捷,在不操作DOM的情況下達到目的,嘻嘻
程式碼塊
這裡貼出相關程式碼,希望能幫到大家:
<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>
最後
使用場景因人而異啊,第一次更新技術部落格,略微有點惶恐