Good face for Check Box in Jquery

http://john.mcclumpha.org/javascript/Creating_custom_styled_checkboxes_with_jQuery/

http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html

javascript : Creating custom styled checkboxes with jQuery

Published: 1 years ago

Demonstration
.com .net .biz .info

For those of you who have been using my DHTML Effects using Javascript code, let me apologise. I have now been overtaken by the force known as jQuery! (Thanks Simon :P) If nothing else it's more compatible, widely supported with a huge development community and a lot more versatile than just a few animated effects. Anyhow, on with the show...

I got sick of the fact that checkboxes, like several other form elements, cannot be styled using css. As a result checkboxes in various browsers always appeared differently and were often enough to ruin a nice (otherwise) clean design. As such I came up with the following solution:

What we will do is create some links (<a href=""> tags) on a page which will represent the fake (styled) checkboxes. When these are clicked they will change in appearance (by adding a css class to them) and their hidden counterpart (the "real" checkbox) will have its value toggled accordingly.

Styling

I wanted a nice modern styling to my checkboxes, although you can easily give them any styling you want (if I get time I'll publish a heap of different samples and ways in which this can be used quite effectively).

I created an image containing both the unchecked and checked states of the checkbox:

The Objects

Next we need to create a link to use for our fake checkboxes:

<a href="#dotcom" class="fakecheck" id="fakedotcom">.com</a>

In this instance we want the text ".com" to be used as a "label" for the checkbox.

Now style the link as follows:

/* fake checkbox : unchecked (default/base) state */
.fakecheck {
	font: 12px Tahoma, Arial, Helvetica, sans-serif;
	text-decoration: none;
	outline: none;
	background: url(../images/checkbox.gif) no-repeat;
	height: 16px;
	width: 40px;
	display: block;
	float: left;
	padding: 1px 0px 0px 20px;
	color: #666666;
}
/* fake checkbox : hover state */
.fakecheck:hover {
	color:#0066FF;
	text-decoration: underline;
}
/* fake checkbox : checked state */
.fakechecked {
	background-position: left -25px;
}

You should now have a link which is the checkbox in it's unchecked state - note however that it doesn't work just yet.

Before we get things working, let's create the "real" checkbox (the one that will actually be used as part of the form) - this will of course be hidden at a later stage. We want this input to have the same id as the hash (#) in the link above, for consistency I use a matching name.

<input type="checkbox" name="dotcom" id="dotcom" />

The Code

Now the fun part... let's get this sucker working!

Firstly, let's create the code to toggle the styling on the new checkbox.

$(document).ready(function(){
	$(".fakecheck").click(function(){
		($(this).hasClass('fakechecked')) ? $(this).removeClass('fakechecked') : $(this).addClass('fakechecked');
		return false;
	});
});

The function is attached to any items styled with the class "fakecheck" and toggles the adding/removing of the class "fakechecked". So now it's looking good and toggling - but what about the hidden "real" checkbox? - let's add a line of code to toggle the checked attribute.

$(document).ready(function(){
	$(".fakecheck").click(function(){
		($(this).hasClass('fakechecked')) ? $(this).removeClass('fakechecked') : $(this).addClass('fakechecked');
		$(this.hash).trigger("click");
		return false;
	});
});

As you can see, I'm using the hash value from the anchor to reference the id of the checkbox (hence they must match).

In a nutshell - that's it.... however things do turn sour if you refresh the page with some items checked (depending on your browser) and if you want the initial state to be checked as the above assumes all are unchecked. No problem, the following code will do everything above and also check the status of all (hidden) checkboxes and match them to the fake ones.

$(document).ready(function(){
	// check for what is/isn't already checked and match it on the fake ones
	$("input:checkbox").each( function() {
		(this.checked) ? $("#fake"+this.id).addClass('fakechecked') : $("#fake"+this.id).removeClass('fakechecked');
	});
	// function to 'check' the fake ones and their matching checkboxes
	$(".fakecheck").click(function(){
		($(this).hasClass('fakechecked')) ? $(this).removeClass('fakechecked') : $(this).addClass('fakechecked');
		$(this.hash).trigger("click");
		return false;
	});
});

That's it! - hopefully this will be of some use to you. :)

Introducing iPhone-style Checkboxes

Ever wanted those flash iPhone on/off toggle switches on your webpage? Love jQuery? Well then I've got something special for you. iphone-style-checkboxes implements the iPhone toggles as replacements for standard HTML checkboxes. Simply run the script and your site will be updated with these specialized controls. Best of all, the underlying checkbox is not touched and backend system will never know the difference. The change is purely visual.

UPDATED: Now with Prototype-based version here.

Examples

A checkbox defaulting to checked	ON OFF
A checkbox defaulting to unchecked

Download and implement

In keeping with the jQuery philosophy, using the iphone-style-checkboxes library is very simple. Download the package, unzip it and place the javascript, images and stylesheet where you please. You'll need to update the stylesheet to point to the new location of your images if they have changed relative to the stylesheet.

Once the files are available to your site, activating the script is very easy:

<head>
  <script src="jquery-1.3.2.js" type="text/javascript"></script>
  <script src="jquery/iphone-style-checkboxes.js" type="text/javascript"></script>
  <link rel="stylesheet" href="path_to/style.css" type="text/css" media="screen" />
  <script type="text/javascript">
    $(document).ready(function() {
      $(':checkbox').iphoneStyle();
    });
  </script>
</head>

The initialization method takes a handful of options.

• checkedLabel sets the text of the "on" state. Defaults to: ON
• uncheckedLabel sets the text of the "off" state. Defaults to: OFF

For example:

$(':checkbox').iphoneStyle({
  checkedLabel: 'YES',
  uncheckedLabel: 'NO'
});

A checkbox defaulting to checked	YES NO
A checkbox defaulting to unchecked

Contribute

The source is available, and forkable, on GitHub at http://github.com/tdreyno/iphone-style-checkboxes. Please direct comments, support requests, bug reporting and pull requests to there.

Comments?

Let me know at thomas@awardwinningfjords.com and I'll amend the article as necessary.