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.

Answer 1

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>