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

Posted 2023-05-09

【中文标题】验证 - 至少选中一个复选框

【英文标题】：Validating - at least one checkbox is checked

【发布时间】：2017-07-27 23:26:17

【问题描述】：

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

相同的代码被用于不同的表单并且它工作完美，但我不知道为什么它不在这个表单上。

脚本：

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 语句块中的代码，即使一个或全部复选框已选中！

【问题讨论】：

您在此处显示的代码中没有任何内容必然会导致问题。您可以尝试在选择器中引用属性；例如，'#MOTForm input[type="checkbox"]:checked' 但我怀疑这是问题所在。也许您有两个具有相同 ID 的元素？

valid 最初在哪里声明/初始化？该javascript代码何时运行？它会在页面加载、表单提交、另一个事件发生（例如按钮点击）等时运行吗？

我仔细检查，没有两个元素具有相同的id

valid 在.click 开头声明

当您说“相同的代码”时，您的意思是在同一页面中 100% 相同？如果是这样，那么这是您的问题，因为您有重复的 id，例如<form id="MOTForm">

【参考方案1】：

您的代码没有显示 当 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>

【参考方案2】：

由于未定义变量 valid，因此您的初始代码中存在错误（见下文）。此错误在browser console 中可见。

未捕获的引用错误：未定义有效

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

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

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

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

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

更新：

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

valid 在.click 开头声明

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

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

【参考方案3】：

请看下面的sn-p。它可以满足您的需求。我删除了 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>