我有一个关于令人困惑的 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]").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;
});
最佳答案
这个问题的措辞不太好。尽管如此，OP 询问您是否有一个分布在不同标题标签中的复选框组...如何确保每个标题至少选择一个框。
解决方案
- 将复选框部分包裹在标签中
- checkbox 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>
关于javascript - 带有 2 个部分的复选框场景的 jQuery 验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36225983/