<form id="myForm">
<label>
<input type="checkbox" name="option" value="option1"> Optie 1
</label>
<label>
<input type="checkbox" name="option" value="option2"> Optie 2
</label>
<label>
<input type="checkbox" name="option" value="option3"> Optie 3
</label>
<button type="submit">Verzenden</button>
</form>
<script>
const form = document.getElementById('myForm');
const checkboxes = form.querySelectorAll('input[type="checkbox"][name="option"]');
form.addEventListener('submit', function(event) {
if (!isAtLeastOneChecked(checkboxes)) {
event.preventDefault(); // Voorkom dat het formulier wordt verzonden
alert('Selecteer minimaal één optie.');
}
});
function isAtLeastOneChecked(checkboxes) {
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
return true; // Er is minimaal één optie geselecteerd
}
}
return false; // Er is geen optie geselecteerd
}
</script>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter