<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