開始啦

最近發現一個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>

最後

使用場景因人而異啊,第一次更新技術部落格,略微有點惶恐