JSFiddle - React, Tailwind, and code Playground

by Jon Lambell

HTML

Test 1: <input type="radio" value="Test" data-customradio="true" name="thisTest"/>
Test 2: <input type="radio" value="Test2" data-customradio="true" name="thisTest" />
Test 3: <input type="radio" value="Test3" data-customradio="true" name="thisTest" checked="checked" />
Test 4: <input type="radio" value="Test4" data-customradio="true" name="thisTest1" />
Test 5: <input type="radio" value="Test5" data-customradio="true" name="thisTest1" />
Test 6: <input type="radio" value="Test3" data-customradio="false" name="thisTest2" />
Test 7: <input type="radio" value="Test3" data-customradio="false" name="thisTest2" />

CSS

.nxtCRContainer {
    width:400px;
    background-color: red;
}
.nxtCRContainer input[type=radio] {
    display:none;
}
.nxtCRContainer span {
    width:100px;
    height:30px;
    display: block;
}
.nxtCRContainer span.checked {
    background-color: blue;
}
.nxtCRContainer span.unchecked {
    background-color: green;
}

JavaScript

var Next = Next || {};
Next.UI = Next.UI || {};
Next.UI.RadioButton = function(){
    var _ = {
       Global: {           
       },
       Init: function(){
           $("input[type=radio][data-customradio=true]").each(function(i,v) {
              _.InitRadio($(this));    
           });
           _.EventsInit();
       },
        InitRadio: function($radio){
            var $container = $("<div />").addClass("nxtCRContainer");
            var $customRadio = $("<span />");
            _.SetUIClass($customRadio, $radio);
            $radio.wrap($container);
            $radio.before($customRadio);
        },
        SetUIClass: function($customRadio, $radio) {
            $customRadio.removeClass()
                        .addClass(($radio.is(':checked') ? "checked" : "unchecked"));                        
        },
        RadioChange: function($radio) {
            var $customRadio = $radio.siblings("span");
            _.SetUIClass($customRadio, $radio);
        },
        EventsInit: function() {
            $("body").on('click', '.nxtCRContainer span', function(e) {
                var $radio = $(this).siblings("input[type=radio][data-customradio=true]");
                $radio.prop("checked", $radio.not(':checked')).change();
            });
            $("body").on('change', '.nxtCRContainer input[type=radio][data-customradio=true]', function() {
                $("input[type=radio][data-customradio=true][name=" + $(this).attr('name') + "]").each(function(i, v) {
                    _.RadioChange($(this));
                });
                
            });
        }
    }

    return {
        Init: _.Init
    };
}();

$(function() {
    Next.UI.RadioButton.Init();
    
    
});