JSFiddle - React, Tailwind, and code Playground

HTML

<form action="#" method="post">
    
    <p>
        Naam:<br>
        <input type="text" name="naam">
    </p>
        
    <p>
        E-mail:<br>
        <input type="text" name="email">
    </p>
        
    <p>
        Selecteer random maximaal 4 opties
        <input type="checkbox" name="checkrandom" id="checkrandom">
    </p>
        
    <p>
        <strong>Merk</strong><br>
        Volvo <input type="checkbox" name="volvo" class="merk" value="volvo"><br>
        Volkswagen <input type="checkbox" name="volkswagen" class="merk" value="volkswagen"><br>
        Alfa <input type="checkbox" name="alfa" class="merk" value="alfa"><br>
        Toyota <input type="checkbox" name="toyota" class="merk" value="toyota"><br>
        Opel <input type="checkbox" name="opel" class="merk" value="opel"><br>
        Fiat <input type="checkbox" name="fiat" class="merk" value="fiat"><br>
        Renault <input type="checkbox" name="renault" class="merk" value="renault"><br>
    </p>
        
    <input type="submit">
        
</form>

JavaScript

$('#checkrandom').on('click',function(){
    if ($(this).prop('checked')) {
        var data = [];
        var data_open = [];
        $('.merk').each(function() {
            if ($(this).prop('checked')) {
                data.push($(this));
            } else {
                data_open.push($(this));
            }
        });
        console.log(data.length);
        if (data.length < 4) {
            //console.log(data.length);
            for (i=data.length;i<4;i++) {
                var index = Math.ceil(Math.random() * data_open.length)-1;
                var obj = data_open[index];
                data_open.splice(index,1);
                data.push(obj);
                obj.prop('checked', true);
            }
        }
    }
});