JSFiddle - React, Tailwind, and code Playground

by badsyntax

HTML

<script src="https://rawgithub.com/filamentgroup/jQuery-Custom-Input/master/js/jQuery.customInput.js"></script>
<script src="http:////cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<fieldset id="checkboxes">
    <input type="checkbox" name="genre" id="check-1" value="action" data-bind="checked: checked, customCheckbox: checked" />
    <label for="check-1">Yes?</label>
    <br/>
    <button id="update">Toggle</button>
    <button id="alert">Alert value</button>
</fieldset>

CSS

body {
    font-size:62.5%
}
fieldset {
    padding:0 15px 3em;
    border:0
}
legend {
    font-size:1.4em;
    font-weight:bold;
    padding:.2em 5px
}
.custom-checkbox, .custom-radio {
    position:relative
}
.custom-checkbox input, .custom-radio input {
    position:absolute;
    left:2px;
    top:3px;
    margin:0;
    z-index:0
}
.custom-checkbox label, .custom-radio label {
    display:block;
    position:relative;
    z-index:1;
    font-size:1.3em;
    padding-right:1em;
    line-height:1;
    padding:.5em 0 .5em 30px;
    margin:0 0 .3em;
    cursor:pointer
}
.custom-checkbox label {
    background:url(http://www.filamentgroup.com/examples/customInput/images/checkbox.gif) no-repeat
}
.custom-radio label {
    background:url(images/radiobutton.gif) no-repeat
}
.custom-checkbox label, .custom-radio label {
    background-position:-10px -14px
}
.custom-checkbox label.hover, .custom-checkbox label.focus, .custom-radio label.hover, .custom-radio label.focus {
    background-position:-10px -114px
}
.custom-checkbox label.checked, .custom-radio label.checked {
    background-position:-10px -214px
}
.custom-checkbox label.checkedHover, .custom-checkbox label.checkedFocus {
    background-position:-10px -314px
}
.custom-checkbox label.focus, .custom-radio label.focus {
    outline:1px dotted #ccc
}

JavaScript

var Model = function () {
    this.checked = ko.observable(false);
};

ko.bindingHandlers.customCheckbox = {
    init: function (element) {
        $(element).customInput();
    },
    update: function (element) {
        $(element).trigger('updateState');
    }
};

// Run the script on DOM ready:
$(function () {

    var model = new Model();

    ko.applyBindings(model, $('#checkboxes')[0]);

    $('#update').on('click', function () {
        model.checked(!model.checked());
    });
    $('#alert').on('click', function () {
        alert(model.checked());
    });
});