Customize HTML control with jQuery (Checkbox + Radio)
July 9, 2009
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:
<html> <head> </head> <body> <input id="CheckBox1" type="checkbox" class="CheckBoxClass"> <label id="Label1" for="CheckBox1" class="CheckBoxLabelClass">Customize Checkbox 1</label> </body> </html>
Ok, now hide the checkbox using CSS:
<style>
.CheckBoxClass{
display: none;
}
</style>
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.
.LabelSelected{
border: 1px dotted black;
}
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".CheckBoxClass").change(function(){
if($(this).is(":checked")){
$(this).next("label").addClass("LabelSelected");
}else{
$(this).next("label").removeClass("LabelSelected");
}
});
});
</script>
Test it now. Simple right? Simple form
Let’s put some style on it and we have our final result: Final Result
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.
$(".RadioClass").change(function(){
if($(this).is(":checked")){
$(".RadioSelected:not(:checked)").removeClass("RadioSelected");
$(this).next("label").addClass("RadioSelected");
}
});
You could check the full code by download the example file.
nice and simple. great work.
A few things that affect accessibility and issues such as Section 508 compliance:
The real physical checkbox should not be hidden until the ready() code executes successfully, so that the page works when JS is disabled or broken.
With a background image being used for the checkbox, there is no feedback for a screen reader or other assistive device to let it know the element is selected. Perhaps a title element describing the state would do the trick?
There is no way to select the checkboxes in the demo using the keyboard, because they never receive focus. It might be possible to wrap the label in a link to get focus that way. Or you could position a dressy image above the actual checkbox without hiding it, so it would still receive focus.
It’s always a good idea to make sure that you can still get to all the native functionality using the keyboard and a plugin. The browser makers have worked hard to ensure that standard form functionality is accessible; a good plugin shouldn’t break that.
Good suggestions Dave
. I will look into improving it. Thanks 
Really nice, I think I might use this. My only comment was that you should preload the images to keep the checking snappy.
True. I just try to put the code as simple and straight forward as possible so non-experience users could understand it easier. I think I should put a note in the end of the article about this though.
But it not work in IE 8
Nice in Firefox, but IE6 doesn’t work.
Have you looked at implementing the accessibilty suggestions Dave mentioned?
Hiya, got it working fine. Could you help me with one item, how do you load the page with checkboxes selected ? I get the form check boxes ok but the image is the unchecked version. Cheers been driving me nuts all afternoon.
Good example which i have made good use of.
The only thing that i have changed to condense code is the toggleClass feature.
$(‘#Label1′).toggleClass(‘CheckBoxSelected’);
As long as the label is linked with the FOR attribute we know that they will always match so dont need to check the ‘Checked’ state.
Just an fyi…I think you’ve got a file in your zip file you didn’t mean to put there. It looks like a scanned image of someone’s “International English Language Testing System” test results. The file is ieltsresult.jpg
Thank for inform me Pat,
It’s not mean to be there. I removed it.
Doesn’t work in IE6 or 8?? … whats the point? Very handy would love to use it but IE6 and 8 are huge.
Bad, doesn’t work in IE 6 and 8 as mentioned.
Hope that is compatible with ie
Hi there,
I want know how i can get the value of label selected and how i can use this value/s in an sql query on my DB !!
Thanks
Hi, it only use a normal html input so you could easily get the value. You didn’t specific which language you’re using, but if you could get the value with non-style control, you could get it the same way.
I found a solution for IE (I guess IE doesn’t like changing the “checked” state of a checkbox that’s not displayed).
Instead of setting “display: none” (or visibility: hidden”, that doesn’t work either) I just positioned it absolutely under (lower z-index) another item. Any item can do, of course it might be the label itself.
Maybe this can fix accessibility issues too? Not sure about that.
Trackbacks