Quantcast
Viewing all articles
Browse latest Browse all 26

Stylize your checkbox using jQuery custom plugin

Hi there, after showing you demo of how to Stylize your select box using jQuery, now I will show you how to stylize your checkbox.

Image may be NSFW.
Clik here to view.
banner

To stylize your checkbox, let’s start with html. Create simple html file and add jquery script on top of scripts file. like.

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

After creating above file, create a new file named “stylize_checkbox.js” and write following code in it

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
	(function($){
		$.fn.checkfyStylize=function(){
			this.each(function(){
				$(this).wrap("");
				var checked="";
				if($(this).is(":checked")){
					checked="selected";
				}
				$(this).parent().append('');
				$(this).change(function(){
					if($(this).is(":checked")){
						if(!$(this).closest(".c-checkbox").hasClass("selected")){
							$(this).parent().find("a").addClass("selected");
						}
 
					}
					else{
							$(this).parent().find("a").removeClass("selected");
					}
				});
				$(this).closest(".c-checkbox").parent().click(function(){
					if($(this).find("input").is(":checked")){
						$(this).find("a").removeClass("selected");
						$(this).find("input").prop("checked",false);
					}
					else{
						$(this).find("a").addClass("selected");
						$(this).find("input").prop("checked",true);
					}
 
				});
				$(this).hide();
			});
		}
	})(jQuery);

Now add this javascript in html file and call this custom plugin as follow

1
2
3
4
5
<script type="text/javascript" src="stylize_checkbox.js"></script><script type="text/javascript">// <![CDATA[
	jQuery(document).ready(function(){
		jQuery("input[type=checkbox]").checkfyStylize();	
	});
// ]]></script>

Now after that add some style to new checkbox, to do that add following code in your html file

After doing all the stuff your final file will look something like this

1
2
3
4
5
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="stylize_checkbox.js"></script><script type="text/javascript">// <![CDATA[
	jQuery(document).ready(function(){
		jQuery("input[type=checkbox]").checkfyStylize();	
	});
// ]]></script>

And when you will view this file in any browser, your output will look like below

Image may be NSFW.
Clik here to view.
checkox-output

In this way you can stylize your checkbox, Later I’ll show you how to Stylize your input type file.

 


Viewing all articles
Browse latest Browse all 26

Trending Articles