Radio button’s complete solution – build, style and unchecking javascript tweak.

Posted in by Nazrul Islam . Filed in Web Design


Radio button – a common form element for picking one value from multiple item. In this tutorial we’ll learn how to construct a radio button group, then styling it using CSS and finally a little JavaScript tweak for better user experience.

Building a radio button group:   While constructing a radio button group, keep it in mind that “all radio button’s input tag must have a value attribute. Normally this value attribute contains Yes or No, this predefined value attribute will transmitted on form submit. Another important thing is about placing  the label. All radio button’s label should be placed after their corresponding input tag, otherwise label wouldn’t work.  Now lets talk about how to group radio button? Answer is pretty simple, just use a common name attribute on all radio button’s input tag you want to group. Here a sample radio button group which is asking for newsletter subscription.

Subscribe to newsletter?

HTML structure  is shown below.

We used a common name  “subscribe” to make them group, and each label placed after the input tag. Type attribute is set to “radio” which tell browser,  its a radio button!

Styling radio button:  We can easily customize button’s label in CSS by targeting label tag. To make more specific selection, target the label following it’s parent’s ID or Class like  .feedback label {} . By default radio button get styling from browser and button style may vary in different browser. But some time we need our custom radio button styling like this form.

Subscribe to newsletter?

This form use a image button instead default styling. Lets have the code view first.

Here the tricks, first we hide the input button by display:none property. Then we use a CSS3 pseudo element on label following its input tag as #feedback2 input[type=”radio”] + label:before{}. We use some regular CSS property like background, height, weight for basic styling. To  styling the button’s look, we use a sprite image on it’s background leaving the content property blank. vertical-align:middle property used to aligning button center with label text. These property used for button’s unchecked state. We changed the checked state using another CSS3 pseudo element named :checked. Structure is #feedback2 input[type=”radio”]:checked + label:before{}. In checked state we just changed background position, that’s all. Our custom radio button design is done. Actually input button is already hidden by display:none property, we are clicking the label only. If you have a question like, how does this label trigger input radio button? Answer is: labels trigger their corresponding input tag using for attribute, like <label for=”subscribed-no”….>. It’ has the same ID we used in our Input tag. There are many ways to style radio button. Instead background image you can style it using border-radius and changing content property.

Unchecking radio button: All radio button appears unchecked on page load. If you clicked one, you can switch the selection, but can’t completely unchecked them! Try it on our previous two from. With a little JavaScript code we can solve this problem.      

Now try this from. If you clicked on a already checked button, it will unchecked.

Subscribe to newsletter?

How it works: First we grub our all input button in  myRadios variable by document.getElementsByName(‘subscribe’) , which returns an array.  Two additional variable setCheck and X used for checked state and counting.  A for loop in a range of X to myRadios array’s length performing the main operation. We put an event listener on every myRadios array child by myRadio[x].onclick, this leads to a function for execution. Now inside the function look at if condition. When button is unchecked, if condition become true and assign setCheck  variable to current array element which is referring by this keyword. Button itself also getting checked state same time. We don’t need to do this manually. If button is already checked if block will not execute again because it will found setCheck is equal to current item. We already clicked it once!  Now else block will come in action, it unchecked the button by this.checked = false;  and setCheck variable gets null value, which will make if condition true for next round.  This will give you a better user experience. If you unfamiliar with JavaScript, you can copy paste this code, just make sure you have same name in input tag’s name attribute and document.getElementsByName(‘xxxx’) keyword. If you get any problem following this tutorial, leave a comment regarding your problem. I’d like to hear from you.


Tags:


6 comments
AndrewLeonard
AndrewLeonard

Yes - this works

Thank you very much for your help

I am very pleased

techmips
techmips moderator

@AndrewLeonard Put a common class on every radio button. It should be <input type="radio" name="Choice0009" value="Second" class="radiocommon"> . Then instead document.getElementsByName('') grab all button by document.getElementsbyClassName("radiocommon"); This will work from IE9.

If you need to support older browser you have to use jQuey. I assume you already got it installed with your Wordpress. in that case write var myRadios = jQuery('.radiocommon'); Rest of the code remain unchanged. Happy Coding!