JSFiddle - React, Tailwind, and code Playground

by kiranruth

HTML

<div class="container">
    <input name="my_checkbox_1" type="checkbox" checked="checked">
    <label for="my_checkbox_1" class="on">Hello</label>
    <input name="my_checkbox_2" type="checkbox" checked="checked">
    <label for="my_checkbox_2" class="on">World</label>
</div>

CSS

.container > input {
    position: absolute;
    top: -1000px;
}
.container > label {
    display:inline-block;
    padding:10px;
    border:1px solid #666;
    margin:10px;
}
.on {
    background : #666;
    color:white;
}
.off {
    background : #efefef;
    color:black;
}

JavaScript

$(document).ready(function () {
    $("label").click(function (event) {
        $("input[name=" + $(this).attr("for") + "]").click();
        parent = $(this).closest(".container");

        // the below code doesn't work in ie.
        len = $(parent).find("input:checkbox:checked").length;
        if (len == 0) {
            event.preventDefault();
            $("input[name=" + $(this).attr("for") + "]").click();
            alert("oops not possible");
            return;
        }
        if ($(this).attr("class") == "on") {
            $(this).attr("class", "off");
        } else {
            $(this).attr("class", "on");
        }
    });
});