JSFiddle - React, Tailwind, and code Playground

HTML

<form name="ricerca">
<fieldset>
    <legend>Seleziona le tabelle su cui cercare</legend>
    <ul>
        <li>
        <input type="checkbox" id="tabella-prodotti" name="tabelle" value="Prodotti" />
        <label for="tabella-prodotti">Prodotti</label>
        </li>
        <li>
        <input type="checkbox" id="tabella-categorie" name="tabelle" value="Categorie" />
        <label for="tabella-categorie">Categorie</label>
        </li>
        <li>
        <input type="checkbox" id="tabella-ordini" name="tabelle" value="Ordini" />
        <label for="tabella-ordini">Ordini</label>
        </li>
    </ul>
    <input type="button" id="cerca" value="Cerca" />
</fieldset>
</form>

CSS

ul {list-style-type:none;}

JavaScript

document.getElementById("cerca").onclick = function() {
    //ottengo l'elenco di tutte le checkbox che abbiano l'attributo name="tabelle"
    var tabelle = document.forms["ricerca"].elements["tabelle"];
    //predispongo un array in cui inserirò i valori di quelle selezionate
    var tabelleSelezionate = [];
    //inizio un ciclo sulle checkbox
    for(var i=0; i<tabelle.length; i++){
        //se la checkbox corrente era selezionata...
        if (tabelle[i].checked){
            //...allora inserisco il suo valore nell'array
            tabelleSelezionate.push(tabelle[i].value);
        }
    }
    
    //quante checkbox selezionate ho trovato?
    if (tabelleSelezionate.length == 0){
        alert("Devi selezionare almeno una tabella per iniziare la ricerca");
        return false;
    } else {
        alert("Inizio la ricerca sulle tabelle: " + tabelleSelezionate.join(","));
        //qui va la richiesta ajax per iniziare la ricerca
        return true;
    }
}