JSFiddle - React, Tailwind, and code Playground
HTML
<table width="100%" id="mytable">
<tr style="background: #999; color: #FFF;">
<td>
<input class="checkbox header" type="checkbox" name="field_name" value="yes" id="Checkbox1" />
<label for="field_name" class="checkboxlabel">
Field Name</label>
</td>
<td>
<input class="checkbox" type="checkbox" name="Add" value="yes" id="Checkbox2" />
<label for="default" class="checkboxlabel">
Add</label>
</td>
<td>
<input class="checkbox" type="checkbox" name="Edit" value="yes" id="Checkbox3" />
<label for="default" class="checkboxlabel">
Edit</label>
</td>
<td>
<input class="checkbox" type="checkbox" name="delete" value="yes" id="Checkbox4" />
<label for="default" class="checkboxlabel">
Delete</label>
</td>
</tr>
<tr class="row1">
<td>
<input class="checkbox" type="checkbox" name="field_1" value="yes" id="field_1" />
<label for="field_1" class="checkboxlabel">
Field 1</label>
</td>
<td align="center">
<input class="checkbox" type="checkbox" name="Add" value="yes" id="Checkbox5" />
</td>
<td align="center">
<input class="checkbox" type="checkbox" name="Edit" value="yes" id="Checkbox6" />
</td>
<td align="center">
<input class="checkbox" type="checkbox" name="delete" value="yes" id="Checkbox7" />
</td>
</tr>
<tr class="row2">
<td>
<input class="checkbox" type="checkbox" name="field_1" value="yes" id="field_1" />
<label for="field_1" class="checkboxlabel">
Field 2</label>
...
JavaScript
$(document).ready(function() {
$("#mytable tr:first input[type=checkbox]").click(function() {
var selector = $("#mytable td:first-child input[type=checkbox]")
if (this.checked) {
$(selector).attr("checked", "checked");
}
else {
$(selector).removeAttr("checked");
}
});
});