Learn and share. The simplest harmony.

 

Stylize Your Own Checkboxes

Posted on March 22, 2010 and got 19 shouts so far

Checkbox is one of the most frequently used element on the forms, plain checkbox will be nice if in the forms we made there are many checkbox or others forms element that are used, but how about we just need a single checkbox in our forms without any other forms element, a little bit horrible, i think.

 

Another case, we need a ‘visual toggle’ that represent two input value, YES or NO, ON or OFF, TRUE or FALSE. It means we must stylize our default and plain checkbox, now do you still remember iPhone style checkboxes? That’s it, i will explain how to create that one.


The Basic and The Technique
Basically, to create stylized checkbox we just need to replace default checkbox with the DIV element that have a background image. To decide which images we want to show (ON or OFF, for example) we will read the checkbox’s value.

In this implementation, we will use image sprite that represent two checkbox status (checked and unchecked). First, we set the CSS class to display the images and to make it looks like a toggle we adjust the background position. In this case, for ON-style we set the background position with ‘top left’ or ’0% 100%’ in percentage, OFF-style we set ‘top right’ or ’100% 0%’.

image1

So if the checkbox has an ON class it will display the image in ON-style, take a look at the following code :

.on {
	background-position: 0% 100%;
}

.iphone-style  {
	display: block;
	width: 87px;
	height: 28px;
	background: url('images/check-square.png') no-repeat;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	overflow: hidden;
	cursor: pointer;
}

image2

And if the checkbox has an OFF class it will display the image in unchecked or OFF-style.

.off {
	background-position: 100% 0%;
}
.firerift-style {
	display: block;
	width: 68px;
	height: 28px;
	background: url('images/check-circle.png') no-repeat;
	cursor: pointer;
}

image3

The Rest, Let’s jQuery Rock!
At this point we have a static stylized checkbox. We can make it being checked or unchecked by adding or removing the class, but we don’t let the user do our task, don’t we? Then it’s time for adding some jQuery magic.

Firstly, we replace all our checkbox with our image using the CSS class we have made before by hiding the default checkbox and create a DIV element that have a background image that represent ‘visual toggle’, plus add a rel attribute and fill it with selected checkbox’s ID. As i said, by reading the checkbox’s value we can decide which image we want to show (ON or OFF) . That’s it, all our default checkboxes have been replaced with the ‘visual toggle’ based on its value.

$('.iphone-style-checkbox, .firerift-style-checkbox').each(function() {

	thisID		= $(this).attr('id');
	thisClass	= $(this).attr('class');

	switch(thisClass) {
		case "iphone-style-checkbox":
			setClass = "iphone-style";
		break;
		case "firerift-style-checkbox":
			setClass = "firerift-style";
		break;
	}

	$(this).addClass('hidden');

	if($(this)[0].checked == true)
		$(this).after('
'); else $(this).after('
'); });

The last thing we must add is a click event to the DIV that triggered to the checkbox value. If the checkbox is unchecked it means we must make it checked, then we must remove class OFF and add class ON, vice versa. To check which checkboxes are clicked we simply read DIV’s rel attribute value that represent the checkbox’s ID.

$('.firerift-style').live('click', function() {

	checkboxID		= '#' + $(this).attr('rel');

	if($(checkboxID)[0].checked == false) {

		$(checkboxID)[0].checked = true;
		$(this).removeClass('off').addClass('on');

	} else {

		$(checkboxID)[0].checked = false;
		$(this).removeClass('on').addClass('off');

	}
});

Still too plain? Then we can add an animation for toggle transition.

$('.iphone-style').live('click', function() {

	checkboxID		= '#' + $(this).attr('rel');

	if($(checkboxID)[0].checked == false) {

		$(this).animate({backgroundPosition: '0% 100%'});

		$(checkboxID)[0].checked = true;
		$(this).removeClass('off').addClass('on');

	} else {

		$(this).animate({backgroundPosition: '100% 0%'});

		$(checkboxID)[0].checked = false;
		$(this).removeClass('on').addClass('off');

	}
});

And that’s it, we have our own cute checkbox. For further usage we just need to create another stylish image and add some animation. Thanks for reading! You can get regular useful updates about web-stuff by subscribing webstuffshare RSS feed or webstuffshare FREE Email subscription. If you like this post, your sharing and feedback would be very appreciated ;)

 

This Post Tags :

Bookmark Post :

Pin It
  • wagh!interesting!but makes me dizzy :lol:

  • $(this).addClass(‘hidden’);

    Why not $(this).hide(); ?

  • @Rendicahya : Great! I forgot such function, thank you! ;)

  • And if you want a little theory about buttons and usability you can check out http://www.webia.info/articles/usability/buttons-and-usability/

  • @ocha : Too early to be dizzy :D

  • Why do I have to write “$(this)[0]…”.
    Why that [0]? What does it do??

  • @Deoxys
    .checked is a property of checkbox DOM object. While $(this) in this case is a jQuery object not a checkbox DOM object itself. Since the first item on a jQuery array is the DOM object itself and we want to use .checked property of DOM object, we must use : $(this)[0].checked

  • lol, totally confusing. But it would be same if I write “$(this).attr(‘checked’);”, right?

  • That’s totally confusing ;-) . But it would be the same if I wrote “$(this).attr(‘checked’);”, right?

  • Why isn’t it possible to shout again?

  • @Deoxys
    Sorry for my bad explanation :D
    Yes you can use attr function instead, you can read the example at here http://www.webstuffshare.com/2010/02/code-snippet-jquery-checkbox-table/

  • I really like this tutorial,..

  • is it possible to add an event to “ON” and “OFF”? Thanks!

  • This is a great tutorial! Thanks for sharing.

  • Is there anyway to set default the checkbox position to off?

    • Remove attribute checked=”checked” on your checkbox. See the demo.

  • Nice tutorial … but the animate() function doesn’t work with newer jQuery versions like 1.6.4 or 1.7 :-(

  • wah, makasih ya..jadi keren checkboxnya..keep on sharing..

  • I ended up creating a jquery plugin out of this

    https://github.com/bainternet/FancyCheckbox

    Enjoy!