JSFiddle - React, Tailwind, and code Playground

by MrTest

HTML

<input class="checkbox" type="checkbox" />

CSS

.new-checkbox { display: block;}
#checked { color: blue;}
#unchecked { color: red;}

JavaScript

(function($) {
        $.fn.checking = function() {
            if( $('.checbox').prop('checked', false) === true ) { $('.new-checkbox').prop('id','unchecked');}
            else { $('.new-checkbox').prop('id','checked'); }
            
        };
})(jQuery);
    
    
$(document).ready( function(){

    $('.checkbox').wrap('<div class="checkbox-wrapper"></div>');
    $('.checkbox-wrapper').append('<p class="new-checkbox">Blue = Checked, Red = Unchecked</p>');
    $('.checkbox').checking();
    $('.checbox').bind('change', function(){
        $(this).checking();
        
    });

});