验证各种无线电按钮与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(); 
    } 
});