带有复选框的jQuery验证方案，包含两个部分
我有一个关于jQuery验证和复选框混淆的问题。
我有一个有两个标题的表单：
问题:在“标题1”下必须选择一个选项，在“标题2”下必须选择一个选项。
通过<input type="checkbox" id="commjoin11" name="commjoin11"/>的<input type="checkbox" id="commjoin" name="commjoin"/>在“标题1”下。
Heading 1
checkbox
checkbox
checkbox
checkbox
checkbox
checkbox通过<input type="checkbox" id="commjoin50" name="commjoin50"/>的<input type="checkbox" id="commjoin12" name="commjoin12"/>在“标题2”下。
Heading 2
checkbox
checkbox
checkbox
checkbox
checkbox
checkbox这需要在单击"Next“按钮时进行检查<input type="submit" name="button" onclick="return ckFormJ(5); " runat=server id="button" value="Next >>">
重申，在“标题1”下必须选择一个选项，在“标题2”下必须选择一个选项。
我可以看到如何查看是否选中了一个框，但验证每个标题下是否至少选中了一个框就有点困难了。我该怎么做才能让它工作呢？
您好，我将每个组都包装在一个div标签中，这样我就可以检查每个组中至少有一个框被选中，但由于某些原因，我无法让它工作。
下面的代码没有正确显示；我如何发布HTML？
Chemistry/Urinalysis $0.00 Education $0.00 Generalist $0.00 Hematology/Hemostasis $0.00 Alabama State Society $10.00 Alaska State Society $0.00 Arizona/Nevada State Society $0.00 Arkansas State Society $0.00 JQUERY显示得很好：$("inputtype=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;})；
回答 2
Stack Overflow用户
发布于 2016-03-26 03:04:22
这个问题表达得不好。尽管如此，OP还是询问您是否有一个复选框组分布在不同的标题tags...how中，您是否确保每个标题至少选择了一个复选框。
解决方案
标记折回复选框中的部分onchange length of selected checkbox per section
- compare
- >= 1 per section
- do per
现场示例
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>Stack Overflow用户
发布于 2016-03-26 03:18:36
尝试用input type="radio"元素替换input type="checkbox"元素；使用fieldset元素包含input元素，将disabled属性添加到input type="submit"元素和不是使用:checked的.prop()的input type="radio"元素；当D11中的D10是D12时，删除D9属性。使用D13检查给定D15父元素中D14元素的状态。
$(".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>
https://stackoverflow.com/questions/36225983
复制相似问题
腾讯云开发者
