JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<h1>Requiring at least one checkbox</h1>

<div class="required">
    <input type="checkbox" name="checkGroup" value="Fork" />
    <label>Fork</label>
    
    <button id="submit">Submit</button>
</div>

CSS

input {
    float: left;
    margin: 2px 5px;
}
label {
    display: block;
    margin: 4px 0;
}

JavaScript

$('#submit').click(function(){
    
    $('.required').each(function() {
        var checked = false, i,
            inputs = $(this).children('input');
        
        
        if (inputs.length === 1) { // may need to get the type of input
            alert($(inputs[0]).attr('type'));
        }
        else {
            for (i = 0; i < inputs.length; i++) {
                if ($(inputs[i]).is(':checked')) {
                    checked = true;
                    break;
                }
            }
        }
        
        alert (checked);
    });
});