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("input[type=checkbox]").on("change", function() {
    if(!jQuery(this).prop("checked")) {
		jQuery(this).parent("label").addClass("checkbox").removeClass("checkbox-checked");
     } else {
		jQuery(this).parent("label").addClass("checkbox-checked").removeClass("checkbox");          
     }
});