Radio Buttons

by someprimetime

HTML

<form action="" class="js-radio-buttons">
    <label id="one"><i data-orig-icon="Check" data-selected="false">Check</i>

        <input type="radio"
        name="category" value="theval">Click me I'm a radio button, dammit</label>
    <label id="two"><i data-orig-icon="Check" data-selected="false">Check</i>

        <input type="radio"
        name="category" value="theval">Click me I'm a radio button, dammit</label>
    <label id="three"><i data-orig-icon="Check" data-selected="false">Check</i>

        <input type="radio"
        name="category" value="theval" />Click me I'm a radio button, dammit</label>
</form>

CSS

label {
    float: left;
}

JavaScript

(function ($) {
    var radioButtons = {
        init: function () {
            this.each(function () {
                var $container = $(this),
                    $radioBtn = $container.find(':radio');

                $radioBtn.on('click', $radioBtn, function (evt) {
                    var $radio = $(evt.target),
                        $label = $radio.parent('label'),
                        $icon = $label.find('i');

                    radioButtons.removePreviouslySelected($radioBtn);

                    $radio.prop('checked', true);
                    $icon.text('Checked').data('selected', 'true');

                });
            });
        },

        // Go through each input radio button and check to see if it's already been selected
        // If it has, then we need to restore the icon to its original (instead of the cached)
        removePreviouslySelected: function ($radioBtn) {
            var $allRadios = $radioBtn.parent('label').siblings().find('i');
            
            $allRadios.filter(function(index) {
                var $icon = $(this);
                if ($icon.data('selected') === 'true') {
                    $icon.text('Check').data('selected', 'false');
                }
            });
        }
    }
    $.fn.radioButtons = radioButtons.init
})(jQuery);

$(function () {
    $('.js-radio-buttons').radioButtons();
});