Проверка различных переключателей с помощью 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>

Мне нужно, чтобы, когда пользователь отправляет форму, он просматривал группы переключателей и для каждой группы, которая не имеетЕсли выбран параметр, отображается последнее сообщение об ошибке.Если оба не выбраны, оба сообщения об ошибках отображаются не только в первом.

Любая помощь?

Заранее большое спасибо

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