script.js

$(document).ready(function () {

    $('.switch').each(function () {
        var radio_yes = $(this).children('input[type=radio][value=1]')[0];
        var toggle = $(this).children('label.switch-toggle');

        if (radio_yes) {
            //	 checkbox.addClass('hidden');
            toggle.removeClass('hidden');

            if (radio_yes.checked) {
                toggle.addClass('on');
                toggle.removeClass('off');
                toggle.text(toggle.attr('data-on'));
            } else {
                toggle.addClass('off');
                toggle.removeClass('on');
                toggle.text(toggle.attr('data-off'));
            };
        }
    });

    $('.switch-toggle').click(function () {
        var radio_yes = $(this).siblings('input[type=radio][value=1]')[0];
        var radio_no = $(this).siblings('input[type=radio][value=0]')[0];
        var toggle = $(this); // We need to inverse the logic here, because at the time of processing, // the checked status has not been enabled yet.

        if (radio_yes.checked) {
            toggle.addClass('off');
            toggle.removeClass('on');
            toggle.text(toggle.attr('data-off'));
            radio_yes.checked = false;
            radio_no.checked = true;
        } else {
            toggle.addClass('on');
            toggle.removeClass('off');
            toggle.text(toggle.attr('data-on'));
            radio_yes.checked = true;
            radio_no.checked = false;
        };
    });
});

style.css

label.switch-toggle {
    background: url('/include/switch.png') repeat-y;
    display: block !important;
    height: 12px; padding-left: 26px;
    cursor: pointer; display: none;
    width: 40px;text-align: center;
    line-height:10px;
}

label.switch-toggle.on {
    background-position: 0px 12px;
}
label.switch-toggle.off {
    background-position: 0px 0px;
}
.hidden {
    display: none;
}