JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <label>
        <input type="checkbox">Premier choix
    </label>
    <label>
        <input type="checkbox" checked>Premier choix
    </label>
    <label>
        <input type="checkbox">Premier choix
    </label>
</form>

CSS

label.checkbox {
    background-color:lightblue;
}
label.checkbox-checked {
    background-color:red;
}

JavaScript

/* Adding classes to labels for styling */
jQuery("label").has("input[type=checkbox]").addClass("checkbox");
jQuery("label").has("input[type=checkbox]:checked").addClass("checkbox-checked");

/* Behaviour when clicking on checkbox labels */
jQuery("form").on("click", "label.checkbox", function () {
    jQuery(this).addClass("checkbox-checked").removeClass("checkbox");
    alert("test");
});
jQuery("form").on("click", "label.checkbox-checked", function () {
    jQuery(this).addClass("checkbox").removeClass("checkbox-checked");
    alert("test");
});