Radio Button behaving like a check box

Description

The purpose of this article is to demonstrate how we can make a radio button behave like a check box. I was reluctant to write a blog about this topic, because lets face it, why in the world would anyone want to do this? The purpose of a radio button is to allow a user to select one of many predefined options. Needless to say, after several requests, I decided to tackle this topic.


Before we dive into the solution, lets discuss why what appears to be a simple task, is in fact not so simple. Your immediate thoughts might look something like this:

   <input type="radio" 
          onclick="this.checked = !this.checked" />

This will not work because Internet Explorer will call the onclick event handler before it sets the check state where as Mozilla, Netscape and Opera will set the check state before the onclick event handler is executed. Some might try and use the onfocus event handler to offset the checkstate in parallel with the onclick event handler. In this scenario, Opera and Internet Explorer will only execute the onfocus event handler for the first check state where as Mozilla and Netscape will execute the onclick event handler followed by the onfocus event handler. Basically, we are faced with an impossible combination to account for. We are left with no other solution but to write clunky code to check the browser type before we decide to handle the check state. Or are we?


After some thought, I realized that we can exploit what it means to be an XHTML document to provide us with a clean and concise solution. XHTML is simply a reformulation of document types as applications of XML. This means, being XML-conforming, we can introduce new elements or element attributes and access them using the DOM structure, and maintain interopability with XML-Based User Agents.


Code

<input type="radio" 
       onclick="run(this,this.action)"
       action="check" />

<script type="text/javascript" language="javascript" >
 function run(sender,e)
 {
   e = (!e)? sender.getAttribute("action") : e;
   sender.checked = (e.indexOf("check") != -1);
   if(sender["action"]) 
      sender.action = (sender.checked)? "clear" : "check";
   else 
      sender.setAttribute(
            "action",
            (sender.checked)? "clear" : "check"
      );
 }
</script>

Explanation

The idea is to define a new element attribute called "action" that will be used to hold a string determining whether we want to check or clear our radio button. Notice the first line in our function "run". Some browsers will treat added attributes as properties of your object, where others will not. So we are checking to see if the "action" property is defined, if it is not, we are accessing the Document Object Model to retrieve the attribute's value. In the same respect, we use setAttribute to set the value of the "action" attribute.


Conclusion

We have demonstrated how to make a radio button behave like a check box. Again, a radio button is a graphical user interface widget that allows a user to select one of many options. I would not advise using a radio button in this manner. It will most likely make your interface user-unfriendly.