Create Iphone Style checkbox using Jquery

by  
Share:
Create Iphone Style checkbox using Jquery

I always fancied about the pretty looking iphone style checkbox, I wanted to use it in one of my project. So, after looking on the web I found one that matched my requirements, I used it in my project, so I thought to share with all of you. The best thing about this plugin is that is very light weight and easily customizable. In this tutorial I will explain how to create iphone style checkbox using Jquery.

View Demo

About the author

All the credits goes to Luke Peters the author of this plugin. I am just showcasing what he already did.

Steps to create iphone style checkbox.

It will just take you less than 2 minutes to create iphone style checkbox out of normal checkbox. Just follow these steps and you are done.

  • Attach checkswitch.css file.
  • Attach Jquery min file and checkswitch.js file.
  • Add class “checkSwitch” to checkbox
  • Lastly, after page loads call checkSwitch() function.

<link rel="stylesheet" href="css/checkswitch.css" />

<!-- just add checkSwitch class to checkbox -->
<input type="checkbox" value="1" class="checkSwitch" />

<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/checkswitch.js"></script>
<script>
  $(function() {
    checkSwitch();
  });
</script>

You can easily customize the ON and OFF text labels. All you have to do is open checkswitch.js file and edit the ON and OFF text.
<!-- Replace On and Off Text -->
$(this).append('<div class="checkSwitchInner"><div class="checkSwitchOn">On</div><div class="checkSwitchHandle"></div><div class="checkSwitchOff">Off</div></div>');

<!--I have replaced it to Yes and No -->
$(this).append('<div class="checkSwitchInner"><div class="checkSwitchOn">Yes</div><div class="checkSwitchHandle"></div><div class="checkSwitchOff">No</div></div>');

View Demo
Share to download the Source Codes for FREE!
We're glad to give free downloads, but we need your love to carry on making that.
Please support us by sharing the page.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.