验证-至少选中一个复选框

Question

我在验证是否至少一个复选框处于选中状态时遇到问题。

相同的代码用于另一种形式，并且可以完美地工作，但是我无法弄清楚为什么它不在这种形式上。

脚本：

if(jQuery('#MOTForm input[type=checkbox]:checked').length == 0) { 
       alert("1");
       valid = valid && false;
       $("#MOTFORMERROR").css('color', 'red');
       $("#MOTFORMERROR").html("*Choose at least one");
}else{
       $("#MOTFORMERROR").html("");
}

HTML：

<td style="width: 10%;" rowspan="3">
    <div style="padding-left:5px;">
       <form id="MOTForm">
           <input name="" type="checkbox"  class="form-check-input"/> HEMS<br />
           <input name="" type="checkbox"  class="form-check-input"/> EMS<br /> 
           <input name="" type="checkbox"  class="form-check-input"/> Walk-in<br />
       </form>

       <p id="MOTFORMERROR"></p>
    </div>
</td>

在if语句块中的代码正在运行的所有的时间，而不是在else语句块中的代码，即使一个或所有复选框被选中！

Answer 1

由于未定义有效变量，因此初始代码中存在错误（请参见下文）。 此错误在浏览器控制台中可见。

未捕获的ReferenceError：有效未定义

由于该错误， valid = valid && false;之后的行valid = valid && false; 没有被执行。

要解决此问题，请在运行此代码之前声明该变量：

var valid = false;
//...other code to check if form is valid

然后将原始JavaScript代码移到可以在Submit上运行的函数中（例如function check() {...} ）。 请参阅下面演示的内容。 它使用jQuery函数.click（）将事件处理程序绑定到提交按钮。 您还将注意到它使用.ready（）等待DOM准备就绪，然后再将事件处理程序绑定到Submit按钮。

 //wait until DOM is ready to bind check function to button click $(document).ready(function(readyEvent) { $('#submit').click(check); }) var valid = false; function check() { if (jQuery('#MOTForm input[type=checkbox]:checked').length == 0) { alert("1"); valid = valid && false; $("#MOTFORMERROR").css('color', 'red'); $("#MOTFORMERROR").html("*Choose at least one"); } else { console.log('no error- clearing error html'); $("#MOTFORMERROR").html(""); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="padding-left:5px;"> <form id="MOTForm"> <input name="" type="checkbox" class="form-check-input" /> HEMS <br /> <input name="" type="checkbox" class="form-check-input" /> EMS <br /> <input name="" type="checkbox" class="form-check-input" /> Walk-in <br /> <button id="submit"> Submit </button> </form> <p id="MOTFORMERROR"></p> </div> 

更新：

您在帖子上输入了评论（回复其他评论中的问题）：

在.click的开头声明有效

现在，这些信息被揭示了，这使我感到上面所说的大部分内容都是无用的。 将有效声明移到点击处理程序中似乎是一个微不足道的更改，除此之外没有太大不同...请参见以下示例：

 //wait until DOM is ready to bind check function to button click $(document).ready(function(readyEvent) { $('#submit').click(check); }) function check() { var valid = false; if (jQuery('#MOTForm input[type=checkbox]:checked').length == 0) { alert("1"); valid = valid && false; $("#MOTFORMERROR").css('color', 'red'); $("#MOTFORMERROR").html("*Choose at least one"); } else { console.log('no error- clearing error html'); $("#MOTFORMERROR").html(""); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="padding-left:5px;"> <form id="MOTForm"> <input name="" type="checkbox" class="form-check-input" /> HEMS <br /> <input name="" type="checkbox" class="form-check-input" /> EMS <br /> <input name="" type="checkbox" class="form-check-input" /> Walk-in <br /> <button id="submit"> Submit </button> </form> <p id="MOTFORMERROR"></p> </div> 

Answer 2

您的代码在执行javascript 时不会显示，可能当您寻找它们时，复选框尚未呈现。

实际上，如果按照您在此处发布的确切顺序运行代码，这是完全正常的，则您的条件始终为真。

如果将代码放在呈现所有HTML之后要调用的函数中，则一切将正常运行：

<td style="width: 10%;" rowspan="3">
    <div style="padding-left:5px;">
        <form id="MOTForm">
            <input name="" type="checkbox"  class="form-check-input"/> HEMS<br />
            <input name="" type="checkbox"  class="form-check-input"/> EMS<br />
            <input name="" type="checkbox"  class="form-check-input"/> Walk-in<br />
        </form>
        <p id="MOTFORMERROR"></p>
    </div>
</td>



<!-- ... -->



<button id="check_btn">Click me</button>



<!-- ... -->



<script>
var valid;

$('#check_btn').click(function() {
    if ($('#MOTForm input[type=checkbox]:checked').length == 0) {
        valid = false;
        $("#MOTFORMERROR").css('color', 'red');
        $("#MOTFORMERROR").html("*Choose at least one");
    } else {
        $("#MOTFORMERROR").html("");
    }
});
</script>

Answer 3

请查看以下代码段。 它确实是您要找的。 我删除了valid变量，因为它不明显，使用了此参数。 显然，您可以按照自己的想法添加和使用它。

 $(function(){ function checkCheckBoxes(){ if($('#MOTForm input[type=checkbox]:checked').length == 0) { alert("1"); $("#MOTFORMERROR").css('color', 'red'); $("#MOTFORMERROR").html("*Choose at least one"); } else { $("#MOTFORMERROR").html(""); } } $(".js-check").on("change", checkCheckBoxes); checkCheckBoxes(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <td style="width: 10%;" rowspan="3"> <div style="padding-left:5px;"> <form id="MOTForm"> <input name="" type="checkbox" class="form-check-input js-check"/> HEMS<br /> <input name="" type="checkbox" class="form-check-input js-check"/> EMS<br /> <input name="" type="checkbox" class="form-check-input js-check"/> Walk-in<br /> </form> <p id="MOTFORMERROR"></p> </div> </td>