Menu
I have a list of multiple check boxes. The user can check all of them, but at least one should be checked to allow form submission. How can I enforce that requirement?
<p>Box Set 1</p> <ul> <li><input name="BoxSelect[]" type="checkbox" value="Box 1" required><label>Box 1</label></li> <li><input name="BoxSelect[]" type="checkbox" value="Box 2" required><label>Box 2</label></li> <li><input name="BoxSelect[]" type="checkbox" value="Box 3" required><label>Box 3</label></li> <li><input name="BoxSelect[]" type="checkbox" value="Box 4" required><label>Box 4</label></li> </ul> <p>Box Set 2</p> <ul> <li><input name="BoxSelect[]" type="checkbox" value="Box 5" required><label>Box 5</label></li> <li><input name="BoxSelect[]" type="checkbox" value="Box 6" required><label>Box 6</label></li> <li><input name="BoxSelect[]" type="checkbox" value="Box 7" required><label>Box 7</label></li> <li><input name="BoxSelect[]" type="checkbox" value="Box 8" required><label>Box 8</label></li> </ul> <p>Box Set 3</p> <ul> <li><input name="BoxSelect[]" type="checkbox" value="Box 9" required><label>Box 9</label></li> </ul> <p>Box Set 4</p> <ul> <li><input name="BoxSelect[]" type="checkbox" value="Box 10" required><label>Box 10</label></li> </ul> 
669
$('#frmTest'). submit(function(){ if(! $('#frmTest input[type="checkbox"]').is(':checked')){ alert("Please check at least one."); return false; } }); is(':checked') will return true if at least one or more of the checkboxes are checked.
There is a form with multiple checkboxes and we're going to make sure that at least one is checked using pure JavaScript. To set a custom validation error message, we will use setCustomValidity() method.
If you need to submit a form when a checkbox is checked or when it is unchecked like when you are using a switch, a good way is to create an hidden input. If you try to submit the checkbox argument if the checkbox is unchecked the form will not be submitted at all.
Here's an example using jquery and your html.
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> </head> <body> <script type="text/javascript"> $(document).ready(function () { $('#checkBtn').click(function() { checked = $("input[type=checkbox]:checked").length; if(!checked) { alert("You must check at least one checkbox."); return false; } }); }); </script> <p>Box Set 1</p> <ul> <li><input name="BoxSelect[]" type="checkbox" value="Box 1" required><label>Box 1</label></li> <li><input name="BoxSelect[]" type="checkbox" value="Box 2" required><label>Box 2</label></li> <li><input name="BoxSelect[]" type="checkbox" value="Box 3" required><label>Box 3</label></li> <li><input name="BoxSelect[]" type="checkbox" value="Box 4" required><label>Box 4</label></li> </ul> <p>Box Set 2</p> <ul> <li><input name="BoxSelect[]" type="checkbox" value="Box 5" required><label>Box 5</label></li> <li><input name="BoxSelect[]" type="checkbox" value="Box 6" required><label>Box 6</label></li> <li><input name="BoxSelect[]" type="checkbox" value="Box 7" required><label>Box 7</label></li> <li><input name="BoxSelect[]" type="checkbox" value="Box 8" required><label>Box 8</label></li> </ul> <p>Box Set 3</p> <ul> <li><input name="BoxSelect[]" type="checkbox" value="Box 9" required><label>Box 9</label></li> </ul> <p>Box Set 4</p> <ul> <li><input name="BoxSelect[]" type="checkbox" value="Box 10" required><label>Box 10</label></li> </ul> <input type="button" value="Test Required" id="checkBtn"> </body> </html> Make all the checkboxes required and add a change listener. If any one checkbox is ticked, remove required attribute from all the checkboxes. Below is a sample code.
<div class="form-group browsers"> <label class="control-label col-md-4" for="optiontext">Select an option</label> <div class="col-md-6"> <input type="checkbox" name="browser" value="Chrome" required/> Google Chrome<br> <input type="checkbox" name="browser" value="IE" required/> Internet Explorer<br> <input type="checkbox" name="browser" value="Mozilla" required/> Mozilla Firefox<br> <input type="checkbox" name="browser" value="Edge" required/> Microsoft Edge </div> </div> Change listener :
$(function(){ var requiredCheckboxes = $('.browsers :checkbox[required]'); requiredCheckboxes.change(function(){ if(requiredCheckboxes.is(':checked')) { requiredCheckboxes.removeAttr('required'); } else { requiredCheckboxes.attr('required', 'required'); } }); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
