检查是否选中复选框时出现问题

时间:2017-09-26 11:26:47

标签: javascript jquery

我在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,但不适用于#acordion_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>

我想验证表单。如果在类别中没有选择任何复选框,那么它应该返回false ...

请帮帮我!!!

1 个答案:

答案 0 :(得分:5)

一旦validateAppliesTo()函数到达return,该函数的其余部分将不会被执行。因此,只处理第一个if / else而不处理第二个if / else。

在下面的代码中,我删除了return并更改了if()语句。

删除退货

删除return将确保运行所有代码。

chaning if()语句

如果未选中复选框,.length将返回0,if()语句中的true等于!。通过在语句前添加if(),它将反转此结果。 简而言之:如果找不到复选框,请输入此#accordion_cat语句。

我还将#collapseCat更改为swal(),因此JS与提供HTML匹配。

<强>结果

结果是,如果没有选中复选框,则 $(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>
csvtojson