Issue in checking whether checkbox is checked

Question

I have written following function in jQuery:

<script> function validateAppliesTo() { if ($("#collapseCat_row input:checkbox:checked").length > 0) { return true; } else { swal({ title: "", text: "Please select any course for which the fee should apply! " }); return false; } if ($("#accordion_cat input:checkbox:checked").length > 0) { return true; } else { swal({ title: "", text: "Please select any category! " }); return false; } return true; } </script>

The above code works fine for #course_condition_row but does not works for #accordion_cat.

In html

<div class="panel panel-default"> <div class="panel-heading"> <h5 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion_cat" href="#collapseCat">Category</a> </h5> </div> <div id="collapseCat" class="panel-collapse collapse in"> <div class="panel-body"> <input name="student_category[]" class="cls_categories" id="General" value="3" type="checkbox">&nbsp;General<br> <input name="student_category[]" class="cls_categories" id="Reserved" value="4" type="checkbox">&nbsp;Reserved<br> </div> </div> </div>

I want to validate the form. If any checkbox is not selected in category accordion then it should return false.

where is accordion_cat id in your html

Pankaj Makwana
– Pankaj Makwana

2017-09-26 11:30:23 +00:00
Commented Sep 26, 2017 at 11:30 — Pankaj Makwana
– Pankaj Makwana, Commented Sep 26, 2017 at 11:30

JasperZelf · Accepted Answer · 2017-09-26 13:04:52Z

Once the validateAppliesTo() functions reaches a return, the rest of that function will not be excecuted. Therefore, only the first if/else will be handled and the second will not be handled.

In the code below I have removed the return's and changed the if() statements.

removing returns

Removing the return's will ensure that all the code is run.

chaning if() statements

If no checkbox is checked, .length will return 0, which in an if() statement is equal to true. By adding the ! in front of the statement it will reverse this outcome. So in short: if no checked boxes are found, enter this if()statement.

I also changed #accordion_cat to #collapseCat so the JS matches the provide HTML.

result

The result is that the swal() code is now called twice if no checkboxes are checked. I don't know what this function is supposed to do, but be aware that it is called twice, and that the second time might overwrite whatever result it had when it was called the first time.

 $(function() { $( "#validate" ).click(function() { validateAppliesTo() }); function validateAppliesTo() { if (!$("#collapseCat_row input:checkbox:checked").length) { swal({ title: "", text: "Please select any course for which the fee should apply! " }); } if (!$("#collapseCat input:checkbox:checked").length) { swal({ title: "", text: "Please select any category! " }); } } function swal(obj){ console.debug('do swal with', obj); } });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel panel-default"> <div class="panel-heading"> <h5 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion_cat" href="#collapseCat">Category</a> </h5> </div> <div id="collapseCat" class="panel-collapse collapse in"> <div class="panel-body"> <input name="student_category[]" class="cls_categories" id="General" value="3" type="checkbox">&nbsp;General<br> <input name="student_category[]" class="cls_categories" id="Reserved" value="4" type="checkbox">&nbsp;Reserved<br> </div> </div> </div> <button id="validate">Validate</button>

@Nida I have updated my answer. I've added a code example. Just open your console and you'll see when the swal() function is called.

Collectives™ on Stack Overflow

Issue in checking whether checkbox is checked

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related