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

jQuery validation with checkboxes scenario with 2 sections

本文关键字：两个 复选框 jQuery 验证      更新时间：2023-09-26

我有一个关于jQuery验证与复选框混淆的问题。

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

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

<input type="checkbox" id="commjoin" name="commjoin"/>至<input type="checkbox" id="commjoin11" name="commjoin11"/>位于"标题1"下。

Heading 1
checkbox
checkbox
checkbox
checkbox
checkbox
checkbox

<input type="checkbox" id="commjoin12" name="commjoin12"/>至<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]"）.点击（函数（）｛

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;

})；

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

解决方案

  • 标记中的复选框部分换行
  • 复选框onchange每个节所选复选框的检查长度
  • 比较选择。每节长度>=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>

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

$(".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>

相关文章：