JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<span id="trigger1" class="trigger" title="click me!">&nbsp;</span>
<input id="cb1" class="styled" data-name="Checkbox 1" type="checkbox" />
<label id="label1">Checkbox 1</label>
<br/>
<span id="trigger2" class="trigger" title="click me!">&nbsp;</span>
<input id="cb2" class="styled" data-name="Checkbox 2" type="checkbox" />
<label id="label2">Checkbox 2</label>
<br/>
<p><span>Test:</span> The checkbox <span id="cb_name">Unknown</span> status is <span id="cb_status">unknown</span>.</p>

CSS

center {
    font-size:30px;
    color:#c00;
}
html {
    padding:10px 40px;
}
label {
    margin-left:5px;
}
span {
    font-weight:bold;
}
.trigger {
    background:#c00;
    display:inline-block;
    cursor:pointer;
    height:14px;
    width:14px;
}

JavaScript

$(function() {
    var check,
    value;
    $("input:checkbox").change(function () {
        value = $("#" + $(this).attr("id").replace("cb", "label")).text();
        check = $(this).is(":checked") ? "checked" : "unchecked";
        $("#cb_name").text(value);
        $("#cb_status").text(check);
    });
    $(".trigger").mousedown(function () {
        ta = $("#" + $(this).attr("id").replace("trigger", "cb"));
        ta.trigger("click");
        if ($.browser.msie) {
            $(ta).trigger('change');
        }
    });
});