JSFiddle - React, Tailwind, and code Playground

by Jon Lambell

HTML

Test 1: <input type="checkbox" value="Test" data-custominput="true" name="thisTest"/>
Test 2: <input type="checkbox" value="Test2" data-custominput="true" name="thisTest" />
Test 3: <input type="checkbox" value="Test3" data-custominput="true" name="thisTest" checked="checked" />
Test 4: <input type="checkbox" value="Test4" data-custominput="true" name="thisTest1" />
Test 5: <input type="checkbox" value="Test5" data-custominput="true" name="thisTest1" />
Test 6: <input type="checkbox" value="Test6" data-custominput="false" name="thisTest2" />
Test 7: <input type="checkbox" value="Test7" data-custominput="false" name="thisTest2" />
<input type="button" value="test" />
<br /><br /><br />
Test 8: <input type="radio" value="Test" data-custominput="true" name="thisTest"/>
Test 9: <input type="radio" value="Test2" data-custominput="true" name="thisTest" />
Test 10: <input type="radio" value="Test3" data-custominput="true" name="thisTest" checked="checked" />
Test 11: <input type="radio" value="Test4" data-custominput="true" name="thisTest1" />
Test 12: <input type="radio" value="Test5" data-custominput="true" name="thisTest1" />
Test 13: <input type="radio" value="Test6" data-custominput="false" name="thisTest2" />
Test 14: <input type="radio" value="Test7" data-custominput="false" name="thisTest2" />
<input type="button" value="test2" />

CSS

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

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

JavaScript

var Next = Next || {};
Next.UI = Next.UI || {};
Next.UI.Input = function(options){
    var _ = {
        defaultOptions: {
            isCheckbox: false,
            isRadio: false        
        },
        Globals: {
            EventsInitialized: false,
            Options: null,
            InputType: ""
        },
       Init: function(){
           _.Globals.Options = $.extend({}, _.defaultOptions, options);
           _.Globals.InputType = (_.Globals.Options.isCheckbox ? "checkbox" : "radio");

           $("input[type=" + _.Globals.InputType + "][data-custominput=true]").each(function(i,v) {
              if(!$(this).data('custominputinit'))
                   _.InitCustomInput($(this)); 
               
           });
           if(!_.Globals.EventsInitialized)
               _.EventsInit();
       },
        InitCustomInput: function($input){
            var $container = $("<div />").addClass("nxtCI" + _.Globals.InputType + "Container");
            var $customInput = $("<span />");
            _.SetUIClass($customInput, $input);
            $input.wrap($container);
            $input.before($customInput);
            $input.data('custominputinit', true);
        },
        SetUIClass: function($customInput, $input) {
            $customInput.removeClass()
                        .addClass(($input.is(':checked') ? "checked" : "unchecked"));                        
        },
        InputChange: function($input) {
            var $customInput = $input.siblings("span");
            _.SetUIClass($customInput, $input);
        },
        EventsInit: function() {
            $("body").on('click', '.nxtCI' + _.Globals.InputType + 'Container span', function(e) {
                var $input = $(this).siblings("input[type=" + _.Globals.InputType + "][data-custominput=true]");
                $input.prop("checked", ($input.is(':checked') ? false : true)).change();
            });
            $("body").on('change', '.nxtCI' + _.Globals.InputType + 'Container...