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="Test6" data-customradio="false" name="thisTest2" />
Test 7: <input type="radio" value="Test7" data-customradio="false" name="thisTest2" />

<input type="button" value="test" />

CSS

.nxtCIContainer {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.nxtCIContainer input[type=checkbox] {
    display:none;
}
.nxtCIContainer span {
    width:20px;
    height:20px;
    display: block;
}
.nxtCIContainer span.checked {
    background-color: blue;
    background-color: orange\9;
}
.nxtCIContainer span.unchecked {
    background-color: green;
    background-color: red\9;
}

JavaScript

var Next = Next || {};
Next.UI = Next.UI || {};
Next.UI.Input = function() {
    var _ = {
        Globals: {
            EventsInitialized: false  
        },
        WrapInput: function($input){
            var _this = this;
            var $container = $("<div />").addClass("nxtCIContainer");
            var $customInput = $("<span />");
            _.SetUIClass($customInput, $input);
            $input.wrap($container);
            $input.before($customInput);
        },
        SetUIClass: function($customInput, $input) {
            $customInput.removeClass()
                        .addClass(($input.is(':checked') ? "checked" : "unchecked"));                        
        },
        InputChange: function($input) {
            var _this = this;
            var $customInput = $input.siblings("span");
            _.SetUIClass($customInput, $input);
        }
        
    }
    return {
        WrapInput: _.WrapInput
    }
}();
debugger;
Next.UI.Input.prototype.Radio = function() {
    var _ = {
        Init: function() {
            $("input[type=radio][data-customradio=true]").each(function(i,v) {
                _.InitRadio($(this));    
            }); 
        },
        InitRadio: function($radio) {
            var _this = this;
            _this.WrapInput($radio);
        }
    }
    return {
        Init: _.Init   
    }
}();
debugger;
$(function() {
    //Next.UI.Input.Radio.Init();
    /*Next.UI.Input.Radio.Init(); 
    
    $("input[type=button]").on('click', function() {
        var newRadio = $("<input type='radio' value='test8' data-customradio='true' name='thisTest2' />");
        $(this).after(newRadio);
        Next.UI.Input.Radio.Init(); 
    });*/
});