These are some really awesome jQuery Tutorials and jQuery Plugins for creating custom form elements like Radio Buttons and check box. Some of my favorites are iPhone Check box tutorials but i would like to know which one are your favorites? Leave your comments below the post.
If you are completely new to jQuery we have great list of beginner tutorials or if your are into mobile projects these jQuery Mobile tuts will definitely help. But this time, it your list for styling custom radio buttons and check boxes.
1. ezMark: jQuery Checkbox & Radiobutton Plugin
ezMark is a jQuery Plugin that allows you to stylize Radio button and Checkbox easily. Its very small (minified version is ~1.5kb) compared to other similar scripts. It has been tested and works on all major browsers (IE 6/7/8, Firefox, Safari, Chrome) and it gracefully degrades.
2. jQuery Fancy Custom Radio-button and Checkbox
It’s fairly easy to use just like any other jQuery plugin you just have to write couple of lines of javascript code and add some CSS to your html.
3. Fancy checkboxes and radio buttons
Many young guns ask about how to style custom checkboxes and radio buttons in forms. I prepared a typical markup, a few lines of CSS and some JavaScript functions (Safari label behavior fix included).
4. jQuery checkbox v.1.3.0 Beta 1
Lightweight custom styled checkbox implementaion for jQuery 1.2.x and 1.3.x.
Features:
- only inline elements used, just like default checkoxes
- cross-browser look and feel (tested in IE6, IE7, IE8, Firefox and Chrome engines)
- work with radio buttons too
- supports inline and jQuery attached click events
- supports “label hovering”: when you point over parent label element, it will highlight its checkbox (thanks to Eugene for the idea)
- dynamic skin changing
- adds new checkbox events “check”, “uncheck”, “disable”, “enable”, ready to use in jQuery.bind() method
5. iPhone Style Radio and Checkbox Switches using jQuery and CSS
You need just two things for this to work correctly: JQuery 1.3.2+ and the switch.gif image file used for the backgrounds (both included in the zip file). After you have those two files.
6. Create iPhone-style buttons with the iButton jQuery Plug-in
At work we just released another jQuery plug-in called the iButton jQuery Plug-in (which brings the total of open source jQuery plug-ins we’ve released to four.) This plug-in allows you to generate iPhone-style buttons from checkbox and radio elements. While there are several libraries out there that generated iPhone-style buttons, we couldn’t find one that did everything we needed, so I wrote one!
The users of our application are very keyboard centric, so it was very important that we supported keyboard entry. Keyboard support often seems to be overlooked in most UI plug-ins—developers get so focused on the mouse interaction, they forget completely about keyboard entry. So we always make keyboard support a key feature in the jQuery plug-ins we write.
7. iphone-style-checkboxes by tdreyno
8. 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.
8 Responses
i like iphone-style-checkboxes by tdreyno ..
it’s better than others, i think.
may be i have to take a look inside it.
Yes, i like those ones too, i’m glad you like it.
Thanks for commenting.
I have implement it in my project,excellent work!
It work pretty well.
Good list. I like ezmark checkbox plugin. I have used in a couple of my work. Its really good.
Cool, I am in the processes of adding new things to my site, this is nice.
Is it too late to post questions or issues here? I have actually tried to implement two different custom checkboxes. The first, screwDefaultButtons v1.1.2 doesn’t provide the callback to onClick events for the checkboxes. The second one, jQuery checkbox 1.3.0 Beta 1 (featured here) actually provides the callback to the onClick event but BEFORE the state of checkbox has changed. I am using the most recent version of jQuery.
My gripe is this – I have attempted to contact both authors with no response. I have spent numerous hours trying to implement both and will have to try yet another method to implement them. The jQuery checkbox 1.3.0 Beta 1 was really sweet with the mouse hover changing the graphic.
Thanks for that cool list! Saved me a lot of time! 🙂
Hi Lelala, nice to hear it was useful!