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

由于未定义变量 valid ，因此初始代码中存在错误（请参阅下文）。此错误在browser console。

中可见

未捕获的ReferenceError：未定义有效

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

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

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

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

＆＃13;

//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("");
  }
}

＆＃13;

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

＆＃13;

更新

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

有效是在.click
的开头宣布的

现在这个信息被揭示了，这让我觉得我上面说的大部分内容都没用。将有效的声明移动到点击处理程序中似乎是一个微不足道的变化，除此之外没有太大的不同......请参阅下面的示例：

＆＃13;

//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("");
  }
}

＆＃13;

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

＆＃13;

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>

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

3 个答案:

更新