JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<form method="post" name="add_reservation"> 
    <div class="group_A">
        <input type="checkbox"  onClick="toggle(this, 'input')" />
        <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"  onClick="toggle(this, 'input')" />
        <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(source, element) {
    checkboxes = source.parentNode.getElementsByTagName(element);
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = source.checked;
    }
}