Sep122009
Pretty Radio Buttons
Comments Off
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <fieldset>
<legend>Demo Radio buttons</legend>
<ul>
<li>
<input type="checkbox" value="2" />
<p>This is first radio button</p>
<a href="#">Select</a>
</li>
<li>
<input checked="checked" type="checkbox" value="3" />
<p>This is second radio button</p>
<a href="#">Select</a>
</li>
</ul>
</fieldset> |
2. jQuery
I have written little jQuery to make this running.
The jQuery code is described below.
1 2 3 4 5 6 7 8 | 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.