JSFiddle - React, Tailwind, and code Playground
HTML
<p>Please choose all the users whose group_id you want to replace with that of the uploaded file</p>
<br />
<form id="groupImportForm" action="<?php echo url_for('group_utilization/importGroupMarching') ?>" method="POST">
<table id="user_info">
<thead>
<th>User ID</th>
<th>Last Name</th>
<th>First Name</th>
<th>Date_Of_Birth</th>
<th>Old Group_ID</th>
<th>New Group_ID</th>
<th>Update GroupID</th>
</thead>
<tbody>
<?php foreach($userGroupData as $value): ?>
<tr>
<td><?php echo $value['user_id']; ?></td>
<td><?php echo $value['last_name']; ?></td>
<td><?php echo $value['first_name']; ?></td>
<td><?php echo $value['date_of_birth']; ?></td>
<td><?php echo $value['group_id_old']; ?></td>
<td><?php echo !empty($value['group_id_new']) ? $value['group_id_new'] : ''; ?></td>
<td><input type="checkbox" name="isReplaceGroupID[<?php echo $value['user_id']; ?>]" value="<?php echo $value['group_id_new']; ?>"></input></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div id="checkbox">
<input type="button" name="CheckAll" value="Check All"
onclick="toggleCheckboxes(true)">
<input type="button" name="UnCheckAll" value="Uncheck All"
onclick="toggleCheckboxes(false)">
</div>
<div><input type="submit" value="Continue" /></div>
</form>
<br/>
<br/>
CSS
#user_info {
border-collapse:collapse;
}
#user_info td, #user_info th {
width:100px;
border:1px solid #CACACA;
padding:5px;
}
#checkbox{
padding:20px 0 20px 250px;
}
JavaScript
function toggleCheckboxes(flag) {
var form = document.getElementById('groupImportForm');
var inputs = form.elements;
if(!inputs){
//console.log("no inputs found");
return;
}
if(!inputs.length){
//console.log("only one elements, forcing into an array");
inputs = new Array(inputs);
}
for (var i = 0; i < inputs.length; i++) {
//console.log("checking input");
if (inputs[i].type == "checkbox") {
inputs[i].checked = flag;
}
}
}