檢查復選框是否已選中的問題

Question

我在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>

上面的代碼適用於#course_condition_row，但不適用於#accordion_cat。

在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>

我想驗證表格。 如果未在Accordian類別中選中任何復選框，則它應返回false。

請幫我！！！

Answer 1

一旦validateAppliesTo（）函數到達return ，該函數的其余部分將不被執行。 因此，將僅處理第一個if / else，而不會處理第二個。

在下面的代碼中，我刪除了return並更改了if()語句。

去除退貨

刪除return會確保所有代碼都運行。

修改if（）語句

如果未選中任何復選框，則.length將返回0，在if()語句中該值等於true 。 通過添加! 在聲明之前，它將扭轉這一結果。 簡而言之：如果未找到復選框，請輸入此if()語句。

我還將#accordion_cat更改為#collapseCat以便JS匹配提供的HTML。

結果

結果是，如果未選中任何復選框，則swal()代碼現在將被調用兩次。 我不知道該函數應該做什么，但是要知道它被調用了兩次，並且第二次可能會覆蓋第一次調用時的結果。

 $(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>