驗證各種無線電按鈕與jQuery

Question

我有3個不同的單選按鈕組中的jQuery像這樣：

<tr class="toValidate"> 
    <td>Please rate question 1</td> 
    <td>Yes<input type="radio" name="question1" value="yes" /></td> 
    <td>No<input type="radio" name="question1" value="no" /></td> 
    <td style='display:none'>ERROR GOES HERE</td> 
</tr> 
<tr class="toValidate" > 
    <td>Please rate question 2</td> 
    <td>Yes<input type="radio" name="question2" value="yes" /></td> 
    <td>No<input type="radio" name="question2" value="no" /></td> 
    <td style='display:none'>ERROR GOES HERE</td> 
</tr> 

我需要的是，當用戶提交表單，它循環通過單選按鈕組和對於每個基團，其沒有選擇選項，顯示錯誤消息的最後一個td。如果兩者都沒有被選中，那麼這兩個錯誤信息都會顯示，而不僅僅是第一個。

任何幫助？

提前感謝

Answer 1

if ($('input[name=question1]:checked').length == 0) { 
    // Display an error for question1 
} 
if ($('input[name=question2]:checked').length == 0) { 
    // Display an error for question2 
} 

如果你有大量的按鈕來驗證，你可以這樣做：

var questions = ['question1', 'question2']; 
for(var i = 0; i < questions.length; i++) { 
    if ($('input[name=' + questions[i] + ']:checked').length == 0) { 
     // Display an error for questions[i] 
    } 
} 

順便說一句，** 請 * *使用<label>標籤正確識別您單選按鈕的標籤。用戶應該能夠點擊「是」，而不僅僅是單選按鈕本身的小圓圈。

或者：

<td><label for="question1-yes">Yes</label><input type="radio" name="question1" value="yes" id="question1-yes" /></td> 

或者：

<td><label>Yes<input type="radio" name="question1" value="yes" /></label></td> 

Answer 2

我稍微修改您的標記包括class="error"

<tr class="toValidate"> 
<td>Please rate question 1</td> 
<td>Yes<input type="radio" name="question1" value="yes" /></td> 
<td>No<input type="radio" name="question1" value="no" /></td> 
<td class="error" style='display:none'>ERROR GOES HERE</td> 
</tr> 
<tr class="toValidate" > 
<td>Please rate question 2</td> 
<td>Yes<input type="radio" name="question2" value="yes" /></td> 
<td>No<input type="radio" name="question2" value="no" /></td> 
<td class="error" style='display:none'>ERROR GOES HERE</td> 
</tr> 

以下代碼段應該做你所需要的。

$('tr').each(function(){ 
    var currValue = $(':radio:checked', this).val(); 
    if (currValue!= "yes" || currValue != "no"){ 
     $(this).find('.error').show(); 
    } 
});