JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" name="add_reservation"> 
<div class="group_A">
<input type="checkbox" id="all0"/>
<input type="checkbox" name="resources_req[]" value="1" />
<input type="checkbox" name="resources_req[]" value="2" />
<input type="checkbox" name="resources_req[]" value="3" />
</div>
<div class="group_b">
<input type="checkbox" id="all1" />
<input type="checkbox" name="resources_req[]" value="1" />
<input type="checkbox" name="resources_req[]" value="2" />
<input type="checkbox" name="resources_req[]" value="3" />
</div>
<input type="submit" name="add_reservation" value="Make this reservation"  />
</form>

JavaScript

function toggle(e) {
    checkboxes = document.getElementsByName("resources_req[]");
    for(var i in checkboxes)
        checkboxes[i].checked = e.target.checked;
}


document.getElementById("all0").addEventListener("click", toggle);
document.getElementById("all1").addEventListener("click", toggle);