CSS Counter and Radio Buttons


I’ll be honest. The one ☝️ thing I’ve not much used CSS Counter for is numbering headings which ironically is the prime example shown in all its tutorials. Although counting header elements is EXTREMELY useful, I’ve found more use for Counter with other elements.

For a long time, it was the table rows, only.

My job requires me to work with lots of data records, and displaying some of them, consolidated, in a table for the user is a necessity.

To show users how many records are present on screen, I use Counter. The technique is pretty straightforward. As per the standard, you initiate a CSS counter at a top level element, typically the root element, and then increment it inside the CSS rule of the table rows (all same level elements).

Once all the rows have been rendered on the page, the count would’ve been completed and can be shown on screen.

Eventually, I started using counters with checkboxes also.

Sometimes the tables I create would need some sort of row selection mechanism, for which we use checkboxes. Think gmail inbox.

So, I started counting checked checkboxes with CSS Counter and show users how many they’ve selected to perform further actions on them: delete, edit, etc. I’ve already written about this technique in CSS Tricks, if you’re interested 🙂

But I didn’t stop with that. I also currently use counters extensively in forms — to display how many fields the user has filled, yet to fill, wrongly filled, must fill and so on. Maybe I’ll write more on that some day, this post, however, will focus only on radio buttons.

Radio buttons are awesome! If there aren’t more than 3 or  4 options that a user has to choose from, instead of a drop-down list show the options as a group of radio buttons. It’d be so much easier and quicker for the user to make the selection.

Counting checked checkboxes and checked radio buttons are similar — to some extent: the part where we increment the counter at the :checked pseudo-class of the elements in CSS.

Radio buttons, however, need a bit more work to get the count right, because they don’t exist solo, but as part of a group of radio buttons.

Here’s how radio buttons are grouped together (notice the same name value):

<input type=radio name=gender> Female
<input type=radio name=gender> Male
<input type=radio name=gender> Other

So when we count selected and unselected fields of radio buttons, what we really need to count is how many groups of them have a checked radio button and how many doesn’t.

Like this:

<div id="grid">
<input type=radio name=gender> Female
<input type=radio name=gender> Male
<input type=radio name=gender> Other
<b></b> <b></b>
<label>Age Group:</label>
<input type=radio name=ageGroup> 0 – 17
<input type=radio name=ageGroup> 18 – 34
<input type=radio name=ageGroup> 35 – 54
<input type=radio name=ageGroup> 55 &amp; above
<span id="unSelectedRadioCount">Unselected fields<br> </span>
<span id="selectedRadioCount">Selected fields<br> </span>

counter-reset: selectedRadioCount, unSelectedRadioCount;
counter-increment: unSelectedRadioCount;
counter-increment: selectedRadioCount;
counter-increment: unSelectedRadioCount -1 selectedRadioCount;
content: counter(unSelectedRadioCount)
content: counter(selectedRadioCount)

The unselected field count is easy to get. Just increment it for every first radio button of the groups, thus getting the right tally of how many groups exist in the first place.

As for getting the number of selected fields, that’s where it gets a bit tricky.

You should increment the selected field count for every checked radio button, while also decrementing the unselected count when checking a radio button that isn’t the first one of its group, because the unselected count is based only on the first ones.

The Author

Web developer and writer. @rpsthecoder in Twitter.