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

  2Comments

  1. Frank Pohrkman   •  

    This is cool. But using jQuery and placing onclick handlers for individual elements could be seen as a bit antithetical. Use a selector, .each loop over them and apply the onclick in your javascript. That way you have no inline javascript and less cruft in your markup. Win win.

  2. Simon Philp   •  

    Hi Frank,
    Thanks for commenting. You’re right it’s a bit intrusive. This post is like proof of concept and the next post is going to strip out it’s flaws. :)

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

    I don’t think I’ll be able to move all the inline Javascript though. Using Asp.net clientIDs will need to be passed to the functions inline :S

Comments are closed.