This tutorial is an extension of Aaron’s blog. This tutorial shows how to implement radio button using checkboxes and css with the help of jQuery.
I am working on a project in that i required some pretty checkboxes as well as some radio buttons. I googled on the web and found aaron’s blog. but that script just supports the checkboxes. It was really fascinating but i needed radio button also
I gave up googling the web, sat back and started tweaking the aaron’s script.
Let’s go to the code
1.) HTML Demo Radio buttons This is first radio button Select This is second radio button Select
2.) jQuery I have written little jQuery to make this running. The jQuery code is described below.
jQuery(".checklist .act_as_radio_button").click( function(event) {
event.preventDefault();
jQuery(this).parent().siblings().find(":checkbox").removeAttr("checked");
jQuery(this).parent().siblings().removeClass("selected");
} ); Copy and paste this code in jQuery’s ready function and you are done.
About The Author
I am Pankaj Baagwan, a System Design Architect. A Computer Scientist by heart, process enthusiast, and open source author/contributor/writer. Advocates Karma. Love working with cutting edge, fascinating, open source technologies.
To consult Pankaj Bagwan on System Design, Cyber Security and Application Development, SEO and SMO, please reach out at me[at]bagwanpankaj[dot]com
For promotion/advertisement of your services and products on this blog, please reach out at me[at]bagwanpankaj[dot]com
Stay tuned <3. Signing off for RAAM