带有 2 个部分的复选框场景的 jQuery 验证

Posted 2023-05-09

技术标签:

【中文标题】带有 2 个部分的复选框场景的 jQuery 验证【英文标题】：jQuery validation with checkboxes scenario with 2 sections 【发布时间】：2016-07-13 13:35:21 【问题描述】：

我有一个令人困惑的带有复选框的 jQuery 验证问题。

我有一个有两个标题的表单：

问题：在“标题 1”下，必须选择一个选项，在“标题 2”下，必须选择一个选项。

<input type="checkbox" id="commjoin" name="commjoin"/> THROUGH <input type="checkbox" id="commjoin11" name="commjoin11"/> 在“标题 1”下。

Heading 1
checkbox
checkbox
checkbox
checkbox
checkbox
checkbox

<input type="checkbox" id="commjoin12" name="commjoin12"/> THROUGH <input type="checkbox" id="commjoin50" name="commjoin50"/> 在“标题 2”下。

Heading 2
checkbox
checkbox
checkbox
checkbox
checkbox
checkbox

点击“下一步”按钮时需要勾选<input type="submit" name="button" onclick="return ckFormJ(5); " runat=server id="button" value="Next >>">

重申，在“标题 1”下必须选择一个选项，在“标题 2”下必须选择一个选项。

我可以看到如何查看是否选中了一个框，但是要验证每个标题下是否至少选中了一个框有点困难。我怎样才能让它发挥作用？

嗨，我将每个组包装在一个 div 标签中，这样我就可以检查每个组是否至少选中一个框，但由于某种原因我无法让它工作。

以下代码未正确显示；如何发布 html？

化学/尿液分析 0.00 美元教育 0.00 美元通才 0.00 美元血液学/止血 0.00 美元阿拉巴马州协会 $10.00 阿拉斯加州协会 0.00 美元亚利桑那州/内华达州协会 0.00 美元阿肯色州协会 0.00 美元

JQUERY 显示正常： $("input[type=submit]").click(function ()

var length1 = $('#Scientific Assembly input[type=checkbox]:checked').length;
alert("length1=" + length1);

var length2 = $('#State Societies input[type=checkbox]:checked').length;
alert("length2=" + length2);

if (length1 == 0) 
    alert("Please select at least one Scientific Assembly checkbox");
    return false;


if (length2 == 0) 
    alert("Please select at least one State Societies checkbox");
    return false;

return true;

);

【问题讨论】：

你能发布一些代码吗？你不需要截图——复制粘贴就可以了。请你加个小提琴好吗？如果您发布您的实际 HTML（必要时），您可以获得更好的解决方案我试图添加一个简短的代码示例，但它一直告诉我添加上下文。不确定 WTF 是否意味着它是一个带有 cmets 的普通代码表......无法粘贴该验证，因此我无法将 HTML 添加到这篇文章中。这是一个更容易的链接：files.mbdevpro.com/CheckboxesCODE.html 【参考方案1】：

这个问题措辞不好。尽管如此，OP 会询问您是否有一个跨不同标题标签的复选框组...您如何确保每个标题至少选择一个框。

解决方案

在标签中包装复选框部分 checkbox onchange 每部分选中复选框的检查长度比较 selection.length >= 每节 1 个在有效时做某事

现场示例

http://codepen.io/anon/pen/RagaML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>test</title>
    </head>
    <body>
        <h1>heading 1</h1>
        <fieldset id="area1">
            <input type="checkbox" name="test"> Box1
            <input type="checkbox" name="test"> Box2
        </fieldset>

        <h1>heading 2</h1>
        <fieldset id="area2">
            <input type="checkbox" name="test"> Box3
            <input type="checkbox" name="test"> Box4
        </fieldset>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
        <script>
            $("input[name=test]").change(function () 
                // check if child box is checked in first section
                var area1 = $("#area1").children("input[name=test]:checked");
                // check if child box is checked in second section
                var area2 = $("#area2").children("input[name=test]:checked");

                var isValid = (area1.length >= 1 && area2.length >= 1);

                if (isValid)
                    alert("valid");
            );
        </script>
    </body>
</html>

【讨论】：

【参考方案2】：

尝试用input type="radio" 元素替换input type="checkbox" 元素；使用fieldset 元素包含input 元素，将disabled 属性添加到input type="submit" 元素和input type="radio" 元素，而不是:checked 和.prop()；当fieldset 中的input 为:checked 时，删除disabled 属性，使用.is() 检查给定fieldset 父元素中input type="radio" 元素的状态。

$(".next").prop("disabled", true);

$("fieldset").each(function() 
  if (!$(":checked", this).is("*")) 
    $(this).addClass("notChecked")
  
);

$("form").change(function() 
  var bool = false;
  var checked = $(".req").each(function(i, el) 
    bool = $(":radio", this).is(":checked")
  );
  if (bool) 
    $(".next[type=submit]").prop("disabled", false);
  ;
  $("fieldset:has(:checked)").removeClass("notChecked")
);

fieldset 
  width: 150px;

fieldset.notChecked 
  border: 1px solid red;

fieldset.notChecked:after 
  content: "Required";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form>
  <fieldset class="req">
    <label>Heading 1</label><br>
    <input type="radio" />
    <input type="radio" />
    <input type="radio" />
  </fieldset>
  <fieldset class="req">
    <label>Heading 2</label><br>
    <input type="radio" />
    <input type="radio" />
    <input type="radio" />
  </fieldset>
  <input class="next" type="submit" />
</form>

【讨论】：

以上是关于带有 2 个部分的复选框场景的 jQuery 验证的主要内容，如果未能解决你的问题，请参考以下文章

带有 JQuery 验证的 Kendo DatePickerFor

验证复选框输入必须仅由 jquery 检查一个

Jquery Validation 多个复选框组

在按钮标题上滑动文本，如带有 css 和 javascript 的选框（不是 jQuery）

交叉验证

jQuery Validate Plug-in 无法验证前半部分的问题