Icon Radio Buttons

Using the jQuery UI buttonset widget to display icons as radio buttons.

HTML

<div id="radio">
    <input type="radio"
           id="radio1"
           name="radio"
            />
    <label for="radio1">Locked</label>
    
    <input type="radio"
           id="radio2"
           name="radio"
           checked="checked" />
    <label for="radio2">Unlocked</label>
</div>

CSS

body {
    font-size: 0.8em;
    margin: 2em;
}

JavaScript

(function( $ ) {
    
    // Custom extension for the buttonset widget.
    $.widget( "app.buttonset", $.ui.buttonset, {
        
        refresh: function() {
            
            // Creates all the button instances
            this._super();
            
            this.buttons.each(function() {
                
                // Do we have an icon to set?
                var $this = $( this ),
                    icon = $this.data( "icon" );
                if ( !icon ) {
                    return;    
                }
                
                // Set the icon option, and hide the text.
                $this.button( "option", {
                    icons: { primary: icon },
                    text: false
                });
                
            });
            
        }
        
    });
    
})( jQuery );

$(function () {
    $( "#radio" ).buttonset();
});