JSFiddle - React, Tailwind, and code Playground
HTML
<div id="myTable">
<input type="checkbox" value="main" id="checkAll" />
<input type="checkbox" value="0" />
<input type="checkbox" value="1" disabled="disabled" />
<input type="checkbox" value="2" />
<input type="checkbox" value="3" />
</div>
CSS
input {
display: block;
margin: 5px;
}
#checkAll {
margin-left: 0px;
}
JavaScript
var $checkboxes =
$("#myTable input[type=checkbox]:not(:first)").
change(function() {
var allIsChecked = $checkboxes.length === $checkboxes.filter(":checked").length;
$all[0].checked = allIsChecked;
});
var $all = $("#checkAll").change(function() {
$checkboxes.attr("checked", this.checked);
});