CODEWITHSUNDEEP
javascriptjqueryhtmlforms
FusionDesign
FusionDesign

Reputation: 343

Multiple Checkboxes > At least one mandatory otherwise error message should display

How do I go about making sure the visitor will tick/select at least one of the options before submitting the form?

Here's an excerpt of my code:

<div class="col-md-6" id="ajax_succs">
<div class="check_parent">
<input type="checkbox" name="sub_sub_cat_select[]" class="default_checkbox" value="351">Option 1</div>
<div class="check_parent">
<input type="checkbox" name="sub_sub_cat_select[]" class="default_checkbox" value="353">Option 2</div>
<div class="check_parent">
<input type="checkbox" name="sub_sub_cat_select[]" class="default_checkbox" value="354">Option 3</div>
<div class="check_parent">
<input type="checkbox" name="sub_sub_cat_select[]" class="default_checkbox" value="355">Option 4</div>
...

Upvotes: 1

Views: 285

Answers (1)

Mamun
Mamun

Reputation: 68933

Find the length of the checked input. Try the following: 

$('#btnSubmit').click(function(){
    var chkSelected = $('input:checked').length;
    if(chkSelected <= 0){
        console.log('No checkbox selected');
    }
    else{
        console.log('Checkbox selected');
    }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="check_parent">
<input type="checkbox" name="sub_sub_cat_select[]" class="default_checkbox" value="351">Option 1</div>
<div class="check_parent">
<input type="checkbox" name="sub_sub_cat_select[]" class="default_checkbox" value="353">Option 2</div>
<div class="check_parent">
<input type="checkbox" name="sub_sub_cat_select[]" class="default_checkbox" value="354">Option 3</div>
<div class="check_parent">
<input type="checkbox" name="sub_sub_cat_select[]" class="default_checkbox" value="355">Option 4</div><br>
<input type="submit" id="btnSubmit" name="" value="Submit">

Upvotes: 3

Related Questions