JQuery Custom Checkbox Example

by Pritom K Mondal

HTML

<div class='base'>
  <input type='checkbox'/> <span class='info'>Custom checkbox example</span>
</div>
<div class='base'>
  <input type='checkbox' checked/> <span class='info'>Custom checkbox example</span>
</div>

CSS

.custom-checkbox-selection {
    padding: 9px;
    display: inline-block;
    cursor: pointer;
    opacity: 0.5;
    background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTA4MDUwNEJBRDI3MTFFMTlGRENCNjU4MDMxN0Y3RjgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTA4MDUwNENBRDI3MTFFMTlGRENCNjU4MDMxN0Y3RjgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMDgwNTA0OUFEMjcxMUUxOUZEQ0I2NTgwMzE3RjdGOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxMDgwNTA0QUFEMjcxMUUxOUZEQ0I2NTgwMzE3RjdGOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiPE+qAAAADVSURBVHjaYmEAAmNjYwEgVQ/ECUAMYlMDfADiBUDcePbs2Q+MUEv2A7EBA23ABSB2ZIH6BGbJBCDeCHTBAUpMBjreAUj5A3EB1Ox6kI/eQ4NrAtCCQmp6BWh2P9SyD0xIcbKRBsG2EEoLMMFEKA0ubABo5gUYm4mBTmDUolGLRi0atWjUoiFtEbA2pHqbAVqlwy36AGXH08Aj/rAWEbOUlJQEkGEBwkC2ABD/fP78+QMKfWIANKcc2l4AgRl0a24xgRp3IAa0qfWBihZ8gJrpCLIDIMAAwfk6Rcrunp0AAAAASUVORK5CYII=') no-repeat top 0 left 0;
    background-size: 18px;
}
.custom-checkbox-selection.selected {
    background:...

JavaScript

if (app === undefined) var app = {};
app.customCheckBox = (function() {
    var prop = null;

    function base() {
        if (!prop) {
            prop = $.prototype.prop;
            $.prototype.prop = function() {
                var elem = $(this), result = prop.apply(this, arguments);
                if (elem.is(".custom-checkbox-base-element")) {
                    elem.trigger("update_view");
                }
                return result;
            };
        }
    }

    return {
        convert: function(page) {
            base();

            page.find('input[type="checkbox"]:not(.custom-checkbox-base-element)').each(function() {
                var cb = $(this);
                cb.after("<span class='custom-checkbox-selection'></span>");
                if (cb.is(":checked")) cb.next().addClass("selected");
                cb.hide();
            });

            page.find('input[type="checkbox"]:not(.custom-checkbox-base-element)').change(function() {
                var cb = $(this);
                cb.next().trigger("update_view");
            });

            page.find('input[type="checkbox"]:not(.custom-checkbox-base-element)').on("update_view", function() {
                $(this).next().trigger("update_view");
            });

            page.find(".custom-checkbox-selection:not(.complete-event-compile)").click(function() {
                var elem = $(this), cb = elem.prev();
                if (elem.is(".selected")) {
                    elem.removeClass("selected").trigger("update_view");
                    cb.prop("checked", false).trigger("change");
                }
                else {
                    elem.addClass("selected").trigger("update_view");
                    cb.prop("checked", true).trigger("change");
                }
            });

            page.find('.custom-checkbox-selection:not(.complete-event-compile)').on("update_view", function() {
                var elem = $(this), cb = elem.prev();
              ...