JSFiddle - React, Tailwind, and code Playground
HTML
<INPUT id=items_All class="checkbox all" name=items value=ALL type=checkbox rel="items">
<LABEL class="items checkbox-label" for=items_All>All</LABEL>
<INPUT id=items_1 class=checkbox name=items value=1 type=checkbox rel="items">
<LABEL class="items checkbox-label" for=items_1>Item 1</LABEL>
<INPUT id=items_2 class=checkbox name=items value=2 type=checkbox rel="items">
<LABEL class="items checkbox-label" for=items_2>Item 2</LABEL>
<INPUT id=items_3 class=checkbox name=items value=3 type=checkbox rel="items">
<LABEL class="items checkbox-label" for=items_3>Item 3</LABEL>
<br />
<INPUT id=widgets_All class="checkbox all" name=widgets value=ALL type=checkbox rel="widgets">
<LABEL class="widgets checkbox-label" for=widgets_All>All</LABEL>
<INPUT id=widgets_1 class=checkbox name=widgets value=1 type=checkbox rel="widgets">
<LABEL class="widgets checkbox-label" for=widgets_1>Widget 1</LABEL>
<INPUT id=widgets_2 class=checkbox name=widgets value=2 type=checkbox rel="widgets">
<LABEL class="widgets checkbox-label" for=widgets_2>Widget 2</LABEL>
<INPUT id=widgets_3 class=checkbox name=widgets value=3 type=checkbox rel="widgets">
<LABEL class="widgets checkbox-label" for=widgets_3>Widget 3</LABEL>
JavaScript
function fixMarkup() {
$("input[type='checkbox']").each(function (i,elem) {
if (elem.checked) {
$("label[for='" + elem.id + "']").css("font-weight", "bold");
} else {
$("label[for='" + elem.id + "']").css("font-weight", "normal");
}
});
}
$("input[type='checkbox']").change(function (e) {
var $o = $(this);
if ($o.hasClass("all")) {
//all box was checked, uncheck others
if ($o.prop("checked"))
$("input[rel='" + $o.attr("rel") + "']").not(this).prop("checked", false);
} else {
// other box was checked, uncheck all
if ($o.prop("checked")) {
$("input.all[rel='" + $o.attr("rel") + "']").prop("checked", false);
}
}
fixMarkup();
});