JQuery：获取一系列复选框以进行验证

Posted 2023-05-09

【中文标题】JQuery：获取一系列复选框以进行验证

【英文标题】：JQuery: Getting a series of checkboxes to validate

【发布时间】：2019-08-03 13:25:30

【问题描述】：

我正在尝试将一组复选框作为我在 WordPress 管理区域中创建的整体表单的一部分以进行验证。基本上，自定义字段。代码如下所示：

<div><label><input type="checkbox" value="0-2"  name="_ecp_custom_5[]" /> 0-2</label></div>
<div><label><input type="checkbox" value="3-5"  name="_ecp_custom_5[]" /> 3-5</label></div>
<div><label><input type="checkbox" value="6-8"  name="_ecp_custom_5[]" /> 6-8</label></div>

等等……

所以我的 javascript 中有这个：

jQuery(document).ready(function($) 
    $('[name="_ecp_custom_3"]').attr("required", true);
    $('[name="_ecp_custom_5[]"]').prop("checked", true);
);

文本字段的第一行，效果很好。但是下面检查的那个根本不起作用。如果我提交表单时未选中复选框，表单仍会发布，当它返回时，即使我没有选中任何字段，现在也会检查所有字段。

对此感到困惑，因为在此验证功能中将有几条规则。

【问题讨论】：

为什么名称具有“_ecp_custom_5[]”值，而在您的代码中您只引用“_ecp_custom_5”？它们不一样。

如果我使用 _ecp_custom_5[] 或 _ecp_custom_5 结尾没有括号，这似乎并不重要。当我使用 _ecp_custom_5[] 时不再出现错误，但即使没有检查任何字段，表单仍会发布。当它回来时，所有的字段都会被检查。我会更新原帖。

@AdamBell 你在用html吗？

另外，你的 jQuery 设置为检查所有复选框，你到底想做什么？

简，我只想确认至少有一个复选框被选中。不勾选所有方框。只需验证。

【参考方案1】：

如果您使用的是 html：

html 元素名称和 id 不能包含特殊字符，例如 [ ]，并且必须以字母 (A-Z)、(a-z) 开头。

除此之外，您的 jQuery 引用了一个带有 name=_ecp_custom_5 而不是 name=_ecp_custom_5[] 的元素。只需删除您名称中的[]，您的代码就可以使用。

更新

$('[name=foo]').prop("checked", true) 将带有name=foo 的所有 复选框设置为选中。我对您此时要问的内容有些困惑，因为您似乎对为什么表单将所有复选框输入都提交为已选中感到困惑？

【讨论】：

首先，我使用 php，因为这是 WordPress 内部的一个表单来发布事件。最初，我没有 [] 。如果我排除它们，则会收到一个错误

首先，我使用 PHP，因为这是 WordPress 内部的一个表单来发布事件 最初，我没有 [] 。如果我排除它们，即使未检查任何内容，表单仍会发布。我把它带回来了，好消息是，表单不再检查任何这些复选框，但同时它也没有验证。所以这是个坏消息。

【参考方案2】：

您想要求至少选中一个复选框，对吧？

您可以使用 jQuery.each() 迭代所有具有 "_ecp_custom_5[]" 的 name 属性值的输入。有了它，您可以创建将在任何条件下使用的任何标志变量。

如果你无法想象我想说什么，请参考下面的 sn-p。

如果您想要求至少选中一个复选框，您可以使用此示例作为基础

$(function() 
  $('#btnValidate').click(function() 
    var flag = false;

    $.each($('[name="_ecp_custom_5[]"]'), function(index, value) 
      var checkboxStatus = $(this).prop('checked');

      if (checkboxStatus == true) 
        flag = checkboxStatus;
      
    );

    if (flag == false) 
      alert('No checkbox has been checked')
     else 
      alert('Success!')
    
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>
    <input type="checkbox" value="0-2"  name="_ecp_custom_5[]" /> 0-2
  </label>
</div>
<div>
  <label>
    <input type="checkbox" value="3-5"  name="_ecp_custom_5[]" /> 3-5
  </label>
</div>
<div>
  <label>
    <input type="checkbox" value="6-8"  name="_ecp_custom_5[]" /> 6-8
  </label>
</div>

<button id="btnValidate" style="margin-top: 20px;">Validate</button>

我是怎么做到的？

我使用 "_ecp_custom_5[]" 的 name 属性值迭代了所有输入。

然后我创建了一个名为 "flag" 的布尔变量（默认值为 false），仅当复选框被更改为 true来自迭代的 prop('checked') 值为 true。如果未选中任何复选框，则 "flag" 变量的值将保持 false，然后将根据我的条件进行检查。

【讨论】：

这就是问题所在。如果您查看原始脚本，它还有一个文本输入字段，也必须是必需的。您只有复选框并完全忽略了其他要求。如何添加？

所以我尝试了你的脚本，是的，我得到了我没有选中框的提示。但是，无论如何，该帖子仍然发布。这是为了发布到 WordPress。