JSFiddle - React, Tailwind, and code Playground
HTML
<form method="post">
<input type="hidden" name="creator_list" id="creator_list" value="" />
<input type="hidden" name="approver_list" id="approver_list" value="" />
<fieldset>
<legend>Category Details</legend>
<label for="category_name">Category Name</label>
<input class="text" type="text" id="category_name" name="category_name" style="width:220px" value="" />
<br/>
<label for="category_description">Category Description</label>
<input class="text" style="width:300px" type="text" id="category_description" name="category_description" value="" />
<br/>
<label for="creator">Creator(s)</label>
<div id="creator_list_display"></div> <a href="#"><img src="/images/btn_add.png" id="img_add_creator" class="add_img"/></a>
<br/>
<label for="approver">Approver(s)</label>
<div id="approver_list_display"></div>
<a href="#" class="float_left"><img src="/images/btn_add.png" id="img_add_approver" class="add_img"/></a>
<br/>
</fieldset>
<fieldset>
<legend>Category Access</legend>
<table id="dept_permissions_table">
<tr id="tbl_heading">
<th>Department</th>
<th class="checkbox_col">Grant Access
<input type="checkbox" id="select_all" />
</th>
<!-- <th>Write</th> -->
</tr>
<tr class="odd">
<td><b>ASI Accounts </b>
</td>
<td class="checkbox_col">
<input type="checkbox" class="checkbox_read" name="read[23]" id="read[23]" />
</td>
</tr>
<tr class="even">
<td><b>ASI Metering </b>
</td>
<td class="checkbox_col">
<input type="checkbox" class="checkbox_read" name="read[12]" id="read[12]" />
</td>
</tr>
<tr...
JavaScript
$('#select_all').click(function () {
if ($(this).attr('checked') == 'checked') {
$('.checkbox_read').attr('checked', 'checked');
} else {
$('.checkbox_read').attr('checked', false);
}
});