Pretty Radio Buttons

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

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

« my First Post

New Ways of rendering partials »