JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

JavaScript

(function($) {
    $.fn.checking = function() {
        if (this.prop('checked')) {
            $('.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();
    $('.checkbox').bind('change', function() {
        $(this).checking();

    });

});