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