在這種情況下添加表單驗證

我有3組單選按鈕和1組複選框。如何檢查每個單選按鈕組中是否選擇了單選按鈕，並且至少選中了一個複選框？如果沒有，可能會彈出一個警告窗口。因此：需要從所有三個組和一個複選框中選擇一個單選按鈕（全部四個都是必需的）。我沒有這個運氣。謝謝在這種情況下添加表單驗證

<html> 
<head> 
<script type="text/javascript"> 
function DisplayFormValues() 
{ 
var str = ''; 
var elem = document.getElementById('frmMain').elements; 


for(var i = 0; i < elem.length; i++) 
{ 
if(elem[i].checked) 
{ 
str += elem[i].value+"<br>"; 
} 
} 

document.getElementById('lblValues').innerHTML = str; 
document.frmMain.reset(); 
} 

</script> 
</head> 
<body> 

<form id="frmMain" name="frmMain"> 
Set 1 
<INPUT TYPE="radio" NAME="r1" value="r1a"> 
<INPUT TYPE="radio" NAME="r1" value="r1b"> 
<INPUT TYPE="radio" NAME="r1" value="r1c"> 
<br> 
Set 2 
<INPUT TYPE="radio" NAME="r2" value="r2a"> 
<INPUT TYPE="radio" NAME="r2" value="r2b"> 
<INPUT TYPE="radio" NAME="r2" value="r2c"> 
<br> 
Set 3 
<INPUT TYPE="radio" NAME="r3" value="r3a"> 
<INPUT TYPE="radio" NAME="r3" value="r3b"> 
<INPUT TYPE="radio" NAME="r3" value="r3c"> 
<br> 
Check 1 
<INPUT TYPE="checkbox" NAME="c1" value="c1a"> 
<INPUT TYPE="checkbox" NAME="c1" value="c1b"> 
<INPUT TYPE="checkbox" NAME="c1" value="c1c"> 

<input type="button" value="Test" onclick="DisplayFormValues();" /> 
</form> 
<hr /> 
<div id="lblValues"></div> 

</body> 
</html>

來源

2010-10-26 Norman

這是你的函數的修改版本：

function DisplayFormValues() { 
    var str = ''; 
    var elem = document.getElementById('frmMain').elements; 
    var groups = { 'r1': 0, 'r2': 0, 'r3':0, 'c1': 0 }; 

    for (var i = 0; i < elem.length; i++){ 
     if (elem[i].checked) { 
      var n = elem[i].name; 
      groups[n] += 1 
      str += elem[i].value + "<br>"; 
     } 
    } 

    document.getElementById('lblValues').innerHTML = groups['r1'] + "/" + 
     groups['r2'] + "/" + groups['r3'] + "/" + groups['c1']; 
    document.frmMain.reset(); 
}

在這個函數中，我們指望有多少元素被選中（顯然一個在同一組單選按鈕，但你明白一個道理，這是靈活）並且groups[XXX]是計數（其中XXX是組名）。您可以根據需要進行調整並根據要求添加警報。

來源

2010-10-26 15:17:50

你可以通過寫很多代碼來做到這一點，或者我強烈建議使用jQuery驗證插件。請看下面的例子：http://jquery.bassistance.de/validate/demo/radio-checkbox-select-demo.html

你可以這樣做：

<input type="radio" validate="required:true" name="family" value="s" id="family_single" class="error">

，這將需要被選擇的至少一個選項。

此外，當某些內容無效時，最好有內聯反饋。有警報可能真的很煩人。

來源

2010-10-26 15:05:47

var radioCount = 0; 
var checkBoxCount = 0; 
var currentElement; 

for (var i = 0; i < elem.length; ++i) { 
    currentElement = elem[i]; 

    if (!currentElement.checked) 
    continue; 
    if (currentElement.type == "checkbox") 
    ++checkBoxCount; 
    else if (currentElement.type == "radio") 
    ++radioCount; 
} 

if (radioCount < 3) 
    //fail 

if (checkBoxCount < 1) 
    //fail

來源

2010-10-26 15:08:44

在這種情況下添加表單驗證

回答

相關問題