Using jQuery/css to make your radio button lists look good

This post was influenced by some prototypes I have been building over the last couple of weeks. Radio button lists used correctly are a fantastic way to get information from your users.

Boring Radio Button List

One problem with radio button lists is that no matter how you present them either in a list format going up and down or horizontal they look boring.

Boring Radio Button List

Good looking Radio Button List

I was thinking of a way to make the above a little bit more exciting and make it more interesting to the end user.  I decided to make it more graphic this is where jQuery goodness and a dab of css comes in. With about 15 lines of code the outcome looks fantastic, who says Radio Button Lists need to be boring?

Cool Radio Button List

Solution

HTML

Looking below you can see that I have added the onclick event to the link but this could be added to any of the elements.

   1:  <h2>Boring radio button List</h2>   
   2:  <ul>
   3:  <li>Please choose your favourite Browser:</li>
   4:  <li><input type="radio" name="ImgCh" value="Chrome" />Chrome</li>
   5:  <li><input type="radio" name="ImgCh" value="InternetExplorer" /> Internet Explorer</li>
   6:  <li><input type="radio" name="ImgCh" value="FireFox" />Firefox</li>
   7:  <li><input type="radio" name="ImgCh" value="Safari" />Safari</li>
   8:  </ul>
   9:  <h2>Jazzed up by jQuery Radio button list</h2>
  10:  <ul>
  11:  <li>Please choose your favourite Browser:</li>
  12:  <li><a href="#" onclick="SelectOpt('ImgChoice','Chrome');"><img src="Images/Chrome.png" alt="Chrome"  /></a>
<input type="radio" name="ImgChoice" value="Chrome" class="d" /> Chrome</li>
  13:  <li><a href="#" onclick="SelectOpt('ImgChoice','InternetExplorer');">
<img src="Images/InternetExplorer.png" alt="Internet Explorer" /></a>
<input type="radio" name="ImgChoice" value="InternetExplorer" class="d"/> Internet Explorer</li>
  14:  <li><a href="#" onclick="SelectOpt('ImgChoice','Firefox');"><img src="Images/FireFox.png" alt="Firefox"  /></a>
<input type="radio" name="ImgChoice" value="Firefox" class="d" /> Firefox</li>
  15:  <li><a href="#" onclick="SelectOpt('ImgChoice','Safari');"><img src="Images/Safari.png" alt="Safari"  /></a>
<input type="radio" name="ImgChoice" value="Safari" class="d" /> Safari</li>
  16:  <li id="Selection"></li>
  17:  </ul>
  18:  <a href="javascript:Toggle();">Show above radio buttons</a>

Script

Line 5 has a function SelectOpt which takes 2 properties: rlName and value. The “rlName” is the name of the radiobutton list we’ll be searching to match the other property “value”. When the value is found the appropriate css class is applied to the elements parent in this case the “li” tag and the hidden radio button is checked.

   1:    <script type="text/javascript">
   2:          function Toggle() {
   3:              $('.d').toggle();
   4:          }
   5:          function SelectOpt(rlName, value) {
   6:              $('input[name="' + rlName + '"]').each(function () {
   7:                  if ($(this).val() == value) {
   8:                      $(this).attr('checked', true).parent().addClass('h');
   9:                  } else {
  10:                      $(this).attr('checked', false).parent().removeClass('h');
  11:                  }
  12:              });
  13:              $('#Selection').text("You selected : " + value);            
  14:          }   
  15:      </script>

CSS

   1:   <style type="text/css">
   2:       body{font-family:Arial;font-size:80%;}
   3:      .h{border:2px solid #569700; background-color:#76AF2C;}  
   4:      .d{display:none;}
   5:      li{ list-style-type:none;width:250px;padding:5px;}
   6:      img{border:1px solid #b5b5b5;}
   7:      </style>

Next Steps

In a future post I will take the above further so that if JavaScript is disabled then the page renders the boring list.

I have created a demo of the above and i have added in the ability to see the actual Radio Buttons when you make a selection.

View the demo