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.

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
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="field">
<div class="checkboxes">
 
<label><input type="checkbox" name="check1" value="value1" />My Checkbox 1</label>
 
<label><input type="checkbox" checked="checked" name="check2" value="value2" />Already Checked</label>
 
<label><input type="checkbox" name="check3" value="value3" onchange="javascript:alert("I am changed")" />This checkbox has changed event</label>
 
<label><input onclick="javascript:alert("I am clicked");" type="checkbox" name="check4" value="value4" />This checkbox has clicked event</label>
 
</div>
</div>

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
6
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css"><!--
label{
cursor:pointer;
}
.checkfycheckbox{
background:url("checkbox.png") no-repeat center top;
display:inline-block;
width:24px;
height:24px;
}
.checkfycheckbox.selected{
background-position:0px -25px;
}
.c-checkbox{
display:inline-block;
}
--></style>

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

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
36
<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>
<style type="text/css"><!--
label{
cursor:pointer;
}
.checkfycheckbox{
background:url("checkbox.png") no-repeat center top;
display:inline-block;
width:24px;
height:24px;
}
.checkfycheckbox.selected{
background-position:0px -25px;
}
.c-checkbox{
display:inline-block;
}
--></style>
<div class="field">
<div class="checkboxes">
 
<label><input type="checkbox" name="check1" value="value1" />My Checkbox 1</label>
 
<label><input type="checkbox" checked="checked" name="check2" value="value2" />Already Checked</label>
 
<label><input type="checkbox" name="check3" value="value3" onchange="javascript:alert("I am changed")" />This checkbox has changed event</label>
 
<label><input onclick="javascript:alert("I am clicked");" type="checkbox" name="check4" value="value4" />This checkbox has clicked event</label>
 
</div>
</div>

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

checkox-output

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

 

No Responses

Leave a Reply

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

*