JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div id="NECESSARY">
        <table id="Table1">
            <tr>
                <td class="name">necessary-a</td>
                <td class="button">
                    <input type="radio" name="necessary" value="uniquename1" /></td>
            </tr>
            <tr>
                <td class="name">necessary-b</td>
                <td class="button">
                    <input type="radio" name="necessary" value="uniquename2" /></td>
            </tr>
        </table>
    </div>

    <div id="group2">
        <table id="Table2">
            <tr>
                <td class="name">group2-a</td>
                <td class="button">
                    <input type="checkbox" name="group2" value="uniquename3" /></td>
            </tr>
            <tr>
                <td class="name">group2-b</td>
                <td class="button">
                    <input type="checkbox" name="group2" value="uniquename4" /></td>
            </tr>
        </table>
    </div>

    <div id="group3">
        <table id="Table3">
            <tr>
                <td class="name">group3-a</td>
                <td class="button">
                    <input type="radio" name="group3" value="uniquename5" /></td>
            </tr>
            <tr>
                <td class="name">group3-b</td>
                <td class="button">
                    <input type="radio" name="group3" value="uniquename6" /></td>
            </tr>
        </table>
    </div>

<div id="canbeselectedwhenever">
    <table id="whenever">
        <tr>
            <td class="name">whenever-a</td>
            <td class="button">
                <input type="checkbox" name="whenever" value="uniquename7" /></td>
        </tr>
        <tr>
            <td class="name">whenever-b</td>
            <td class="button">
                <input type="checkbox" name="whenever" value="uniquename8" /></td>
        </tr>
    </table>
</div>
</form>

JavaScript

// get all the input elements
var inputs = document.getElementsByTagName("input");

var temp = [];      // holds the radio/checkboxes
var necessary = []; // holds the necessary elements

for(var i = 0; i < inputs.length; i++){
    if(inputs[i].name !== "necessary")
        temp.push(inputs[i]);
    else
        necessary.push(inputs[i]);
}

inputs = temp.slice(0);  // get a copy of the temp array and store in inputs

for(var i = 0; i < inputs.length; i++){
    // add an event listener which fires the `mouseDown` on 'click'
    if(inputs[i].name !== "whenever")
        inputs[i].addEventListener("click", mouseDown, false);
}


function mouseDown(){
    var any_checked = false; // is any radio button checked ?
    
    for(var i = 0; i < necessary.length; i++){
        if(necessary[i].checked){ // if any is checked 
            any_checked = true;  // any radio is checked = true
            break;              // come out of loop
        }
    }
    
    if(! any_checked){  /// if nothing is checked
        alert("You left all fields blank.");  // alert user
        for(var i = 0; i < inputs.length; i++){
            inputs[i].checked = false;
        }
    }
}