我有一个包含3组问题的HTML表单，用户可以回答“是”或“否”，如下所示：
A1 A2 A3 A4 A5
OR
B1 B2 B3
OR
C1 C2 C3 C4 C5 C6
用户可以选择回答所有“A”问题，所有“B”问题或所有“C”问题，但他们不能回答多个组。同样，对于他们选择回答的任何一组，他们必须回答同一组中的所有问题（即所有“A”或所有“B”或所有“C”问题 - 他们不能留下未回答的问题）。
以下是表单的HTML：
<form method="post" action="process.php" id='editRecord'>
<table border="1" class="record">
<tr>
<td width="88%" valign="top" class="field_name_left">A1</td>
<td width="12%" valign="top" class="field_data">
<input type="radio" name="CriteriaA1" value="Yes">Yes<input type="radio" name="CriteriaA1" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">A2</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaA2" value="Yes">Yes<input type="radio" name="CriteriaA2" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">A3</td>
<td valign="top" class="field_data"> <input type="radio" name="CriteriaA3" value="Yes">Yes<input type="radio" name="CriteriaA3" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">A4</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaA4" value="Yes">Yes<input type="radio" name="CriteriaA4" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">A5</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaA5" value="Yes">Yes<input type="radio" name="CriteriaA5" value="No">No</td>
</tr>
<tr>
<td valign="top" class="field_name_left" colspan="2"> </td>
</tr>
<tr>
<td valign="top" class="field_name_left" colspan="2"><strong>OR</strong></td>
</tr>
<tr>
<td valign="top" class="field_name_left" colspan="2"> </td>
</tr>
<tr>
<td valign="top" class="field_name_left">B1</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaB1" value="Yes">Yes<input type="radio" name="CriteriaB1" value="No">No</td>
</tr>
<tr>
<td valign="top" class="field_name_left">B2</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaB2" value="Yes">Yes<input type="radio" name="CriteriaB2" value="No">No</td>
</tr>
<tr>
<td valign="top" class="field_name_left">B3</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaB3" value="Yes">Yes<input type="radio" name="CriteriaB3" value="No">No</td>
</tr>
<tr>
<td valign="top" class="field_name_left" colspan="2"> </td>
</tr>
<tr>
<td valign="top" class="field_name_left" colspan="2"><strong>OR</strong></td>
</tr>
<tr>
<td valign="top" class="field_name_left" colspan="2"> </td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">C1</td>
<td width="12%" valign="top" class="field_data">
<input type="radio" name="CriteriaC1" value="Yes">Yes<input type="radio" name="CriteriaC1" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">C2</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaC2" value="Yes">Yes<input type="radio" name="CriteriaC2" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">C3</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaC3" value="Yes">Yes<input type="radio" name="CriteriaC3" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">C4</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaC4" value="Yes">Yes<input type="radio" name="CriteriaC4" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">C5</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaC5" value="Yes">Yes<input type="radio" name="CriteriaC5" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">C6</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaC6" value="Yes">Yes<input type="radio" name="CriteriaC6" value="No">No</td>
</tr>
<tr class="submit_btn">
<td colspan="3"> </td>
</tr>
<tr class="submit_btn">
<td colspan="3">
<div id="buttons" >
<input type="submit" name="-edit" value="Continue">
<input type="reset" name="reset" value="Reset">
</div>
<div id="error"></div> </td>
</tr>
</table>
</form>
我还设置了一个jsFiddle：
http://jsfiddle.net/fmdataweb/pEETU/2/
我想添加一些客户端验证，以检查用户何时单击“继续”按钮，确定他们确实回答了一个组中的所有问题，并且未回答来自其他组的任何问题。
我以前在表单只有A或B选项时进行了验证 - 表单现在有C选项，我需要更新Javascript但是到目前为止我尝试的所有内容都失败了。
以下是适用于原始A和B选项的Javascript：
$(function() {
$("#editRecord").submit(function(){
// is anything checked?
if(!checkEmpty()){
$("#error").html("Please check something before submitting");
//alert("nothing Checked");
return false;
}
// Only A _OR_ B
if(isAorB()){
$("#error").html("Please complete A or B, not both");
//alert("please complete A or B, not both");
return false;
};
// all A's or all B's
if(allAorBChecked()){
$("#error").html("It appears you have not completed all questions");
//alert("missing data");
return false;
};
if(haveNo()){
// we're going on, but sending "type = C"
}
//alert("all OK");
return true;
});
});
function checkEmpty(){
var OK = false;
$(":radio").each(function(){
if (this.checked){
OK = true;
}
});
return OK;
}
function isAorB(){
var OK = false;
var Achecked = false;
var Bchecked = false;
$(":radio").each(function(){
var theChar=this.name.charAt(8);
// if we have an A checked remember it
if(theChar == "A" && this.checked && !Achecked){
Achecked = true;
}
if(Achecked && theChar == "B" && !Bchecked){
if(this.checked){
Bchecked = true;
}
}
if (Achecked && Bchecked){
OK = true;
}
});
return OK;
}
function allAorBChecked(){
var notOK = false;
var Achecked = false;
$(":radio").each(function(){
// skip through to see if we're doing A's or B's
var theChar=this.name.charAt(8);
// check the A's
if(theChar == "A" && this.checked && !Achecked){
Achecked = true;
}
});
if(Achecked){
// set the input to A
$("#type").val("A");
// check _all_ a's are checked
var thisName;
var thisChecked = false;
$(":radio").each(function(){
var theChar=this.name.charAt(8);
var checked = this.checked;
if (theChar == "A"){
if (this.name == thisName && !thisChecked){
// Yes wasn't checked - is No?
if(!checked){
notOK = true;
}
}
thisChecked = checked;
thisName = this.name;
}
});
}else{
// set the input to B
$("#type").val("B");
// check _all_ b's are checked
var thisName;
var thisChecked = false;
$(":radio").each(function(){
var theChar=this.name.charAt(8);
var checked = this.checked;
if (theChar == "B"){
if (this.name == thisName && !thisChecked){
// A wasn't checked - is B?
if(!checked){
notOK = true;
}
}
thisChecked = checked;
thisName = this.name;
}
});
}
return notOK;
}
function haveNo(){
var thisName;
var notOK = false;
$(":radio").each(function(){
var checked = this.checked;
if (this.name == thisName){
//Is this checked
if(checked){
notOK = true;
$("#type").val("C");
}
}
thisName = this.name;
});
return notOK;
}
答案 0 :(得分：0)
使用最优秀的jQuery Validation Plugin http://docs.jquery.com/Plugins/Validation，您可以使用“depends”来仅在满足其他条件时才需要字段。
要确保只填写一组字段，您可以在单击后使其他字段不可见（并以编程方式清空任何值）。我看到的问题是当有人开始点击单选按钮然后决定他们想要填写b数据时......他们将如何删除A中的所有单选按钮？