Changing the address book drop down (for shipping) from drop down list to radio buttons

Question

I need to know how to change the address book drop down on a registered account checkout to radio buttons (similar to Amazon)

Answer 1

I tried doing this some time ago and I found that modifying the billing address and shipping address templates was a time consuming job, a big error source.
I ended up doing it with javascript. I'm not 100% sure that it covers all the possible cases but I didn't find any issue so far.
The following piece of js did the trick.

function selectToRadio(selectid){
    var selectname = jQuery('#' + selectid).attr('name');
    jQuery('#' + selectid).hide().after('<div class="radio-field" id="' + selectid +'_radios"></div>').children('option').each(function(){
        var optval = jQuery(this).val();
        var opttext = jQuery(this).text();
        var checked = '';
        if (jQuery(this).is(':selected')){
            checked = ' checked="checked"';
        }
        jQuery(this).parent().next().append('<div class="radio-entry"><input' + checked + ' type="radio" name="'+selectname+'" value="'+optval+'" id="' + selectid + '_' + optval + '" /><label class="radio-label" for="' + selectid + '_' + optval + '">'+opttext+'</label></div>');
    });
    jQuery('#' + selectid +'_radios input[type="radio"]').on('change', function(){
        jQuery('#' + selectid).val(jQuery(this).val());
        $(selectid).onchange();
    });
}

Place this in one of your js files (note: it works with jQuery only) and in the billing and shipping address templates (or in checkout/onepage.phtml) and in the mutishipping pages just add these lines:

<script type="text/javascript">
jQuery(document).ready(function(){
    selectToRadio('billing-address-select');//for billing address
    selectToRadio('shipping-address-select');//for shipping address
});
</script>