Wayne May Android, Linux, PHP, and Javascript.

Making Your Radio Group Tab-able Using jQuery

Recently I had to come up with a solution to make radio boxes tab-able. Mozilla Firefox allows you to tab over each radio box in a group, however, all other browsers do not. The solution is actually quite simple.

First, in your HTML make sure to name your radio boxes with the same name, but also add a .1, .2, .3, and so on, to separate them. You will also need a hidden element. This is the one you want to do validation against.
For example:

1
2
<input type="hidden" name="group1" value="" />
3
<input type="radio" name="group1.1" value="1" tabindex="10" /> Radio 1
4
<input type="radio" name="group1.2" value="2" tabindex="11" /> Radio 2
5
<input type="radio" name="group1.3" value="3" tabindex="12" /> Radio 3
6

Now add a little bit of code that will parse once the DOM is ready:

1
2
<script type="text/javascript">
3
    $(document).ready( function() {
4
        rt = new RadioTabs();
5
        rt.init( "group1", ["group1.1", "group1.2", "group1.3"], ["click"] );
6
    });
7
</script> 
8

All this does is tell the RadioTabs class (coming next) which tabs will be in the group.

Finally, add this somewhere on you page. Preferably on a separate page.

01
02
/* Create Tabable Radio Boxes */
03
function RadioTabs() {
04
    /* Declare Private Members and Methods */
05
    var hidden = '';
06
    var group = [];
07
    var events = [];
08
 
09
    /* void Bind Events to each individual Radio Box */
10
    var bindEvents = function () {
11
        //Loop through Events
12
        for( var e = 0; e < events.length; e++ ) {
13
            //Loop through Radio Buttons
14
            for( var g = 0; g < group.length; g++ ) {
15
                //Add a Rel value to each group box - to be used in the bind
16
                $('input:radio[name="' + group[g] + '"]').attr('rel', g);
17
                //Bind actual events to each radio box
18
                $('input:radio[name="' + group[g] + '"]').bind(events[e], function( event ) {
19
                    var n = $(this).attr('rel');
20
                    $('[name="' + hidden + '"]').val( $('[name=' + group[n] + ']').val() );
21
                    //Step through radio group and set to false
22
                    for( var i = 0; i < group.length; i++ ) {
23
                        if( group[i] != group[n] ) {
24
                            $('input:radio[name="' + group[i] + '"]:checked').attr( 'checked', false );
25
                        }
26
                    };
27
                });
28
            }
29
        }
30
    };
31
 
32
    /* Declare Public Members and Methods */
33
    return {
34
        /* string Set the Hidden Input Element */
35
        setHidden    : function ( value ) {
36
            hidden = value;
37
        },
38
        /* array Set the Radio Group Elements */
39
        setGroup    : function ( values ) {
40
            group = values;
41
        },
42
        /* array Set the Events to bind to */
43
        setEvents    : function ( values ) {
44
            events = values;
45
        },
46
        /* void Init the script */
47
        init            : function ( hid, grp, evt ) {
48
            this.setHidden( hid );
49
            this.setGroup( grp );
50
            this.setEvents( evt );
51
            bindEvents();
52
        }
53
 
54
    };
55
};
56

All the above piece of code does is it will allow you to tab through the radio boxes, and then set the hidden elements value to that of the selected radio box.

You might have to tweak a little bit with CSS in IE7 and 8 (I don’t support 6 anymore) to make it show that the box is selected.
This should do the trick

1
2
input[type=radio]:focus {
3
	outline:#000 dotted thin;
4
}
5