JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form1">
    <input type="checkbox" value="foo" class="required" />
    <input type="checkbox" value="bar" />
    <input type="checkbox" value="baz" class="required last" />
</form>

JavaScript

var form = document.getElementById('form1');
var inputs = form.getElementsByTagName('input');

form.addEventListener('change', check);

function check(event) {
    var element = event.target;
    var inputArray = Array.prototype.slice.call(inputs);
    var conditionMet = true;
    
    // check all inputs checked
    inputArray.forEach(function (el, index) {
        if (!el.checked) {
            conditionMet = false;   
        }
    });
    
    // OR 
    
    // check all inputs with a class "required" are checked
    inputArray.forEach(function (el, index) {
        if (el.className.indexOf('required') !== -1) {
            if(!el.checked) {
                conditionMet = false;
            }
        }
    });
    
    if (conditionMet) {
        showWarningDiv();
    }
}

function showWarningDiv() {
    // show div
    console.log('show warning');
}