Customize HTML Control with jQuery (Checkbox + Radio)

customizehtmlcontrols


In web development/design, there’re a lot of time you want to customize HTML controls. Some controls are actually quite simple to implement. I will show you how to customize a checkbox/radiobox. It will be very simple, just need a few lines of jQuery and CSS.

Theory behind

As always, I try to find the easiest way to solve this problem. In normal HTML, if you create a Checkbox and a label link to it, whenever you click on the label

it will also check/uncheck the checkbox. So to customize the Checkbox control, all you need to do is hide the actual checkbox and customize the label.

Because you hide the checkbox already, so you won’t know if the box is checked or not, that’s where the jQuery comes in. You will use the jQuery to change

the class to the label so you will know if the check box is checked or not. Simple right?

Do it.

Right, start with a very basic html:

Ok, now hide the checkbox using CSS:

Now the checkbox’s gone. If you click on the label, the checkbox is still checked/unchecked, but you won’t see it though. Now if it’s checked, we want to

change the style of the label so we know it’s checked. Add a CSS for the selected label class. And the script to switch the class.

The same with radio button. However, when we check/uncheck a radio, it also effect other radio as well. So you will need to make sure it will clear the unchecked.

You could check the full code by download the example file.

DEMO
DOWNLOAD EXAMPLE ZIP

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA