Question

我在jQuery中有3个不同的单选按钮组，如下所示：

<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();
    }
});

使用jQuery验证各种单选按钮

2 个答案: