So heres the thing, you've got a site using radio buttons; but whilst you still want the (radio button) options to be mutually exclusive and mandatory  (so you still want a radio button) you actually want it to look like a checkbox.

The problem

Essentially you want a radio button that looks like a checkbox but behaves like a radio button.

So what are the options here, well the ones I considered were:

  • Replacing my radio button with a checkbox and use JQuery to control just having one active
  • Complex CSS involving image replacement (yuk)
  • Use a prewritten JQuery plugin (jquery-checkbox)

Whats the answer?

Being lazy I opted for the jquery plugin, it had the advantage of being lightweight, easy to implement and gracefully degrades with javascript (you get it styled as a radio button).

The implementation is dead easy, simply add the "jquery-checkbox.js" file to your site, along with a link to jquery, and then just invoke the "checkbox()" function against your radio button input tags. Below is a simple example of this being done:

<html>
<head>
  <title>Checkbox demo</title>
  <link rel="stylesheet" href="jquery.checkbox.css" />
  <link rel="stylesheet" href="jquery.safari-checkbox.css" />
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.checkbox.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
    $('input.yesno').checkbox({cls:'jquery-safari-checkbox'});
  });
  </script>
</head>
<body>
  <h1>Radio button demo</h1>
  <p>A set of normal radio buttons</p>
  <p><input id="a1" name="yesno1" type="radio" checked value="yes"><label for="a1">Yes</label><br />
  <input id="b1" name="yesno1" type="radio" value="no"><label for="b1">No</label></p>
  <p>The same radio buttons but now styled as checkboxes using the jquery checkbox plugin.</p>		
  <p><input id="a2" name="yesno2" class="yesno" type="radio" checked value="yes"><label for="a2">Yes</label><br />
  <input id="b2" name="yesno2" class="yesno" type="radio" value="no"><label for="b2">No</label></p>
  <p>To find out more checkout the <a href="http://widowmaker.kiev.ua/checkbox/">checkbox plugin full demo</a> page.</p>
</body>
</html>

If you want to see this in action click here and if you want to have a look at a better demo and get all the resources (including CSS & images) for the plugin visit JQuery checkbox plugin demo page.

Tags: