Applying Styles to Check Boxes / Radio Buttons – Jquery Plugin
Check boxes and radio buttons are INPUT elements of HTML which lets us choose the options. Check boxes are used for choosing some of the options or enabling/disabling some value. Radio buttons are generally used for choosing one of the various options.
Both have minimal UI and supporting messages are generally displayed to describe the input. Radio buttons are used in the group i.e. if one of them is checked, rest will be unchecked automatically.
I found this jquery plugin which apply styles to Check boxes and Radio buttons for presenting better interface. I liked it because it makes the selected choice more clear to the user. You can find this plug-in at http://widowmaker.kiev.ua/checkbox/. Project is also hosted at google code so you can also check http://code.google.com/p/jquery-checkbox/
Some of the features:
1. Only inline elements used, just like default checkoxes
2. Cross-browser look and feel (tested in IE6, IE7, IE8, Firefox and Chrome engines)
3. Work with radio buttons too
4. Supports inline and jQuery attached click events
5. Dynamic skin changing
6. Adds new checkbox events “check”, “uncheck”, “disable”, “enable”, ready to use in jQuery.bind() method
And of course there is a dependency of Jquery javascript library(1.3.2 recommended) .
Now here is the code using which above check boxes and Radio buttons are transformed.
$(document).ready(function() { $('input:checkbox').checkbox(); $('input:radio').checkbox(); });
Above code will add style to all the check box and radio inputs present in document.
Most Commented Posts
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
No comments yet.
Leave a comment