jquery - 在提交表单之前验证多个无线电组

Question

所有，我有以下 HTML 代码来显示一个带有一些单选框的表单：

<tr id="row1">
    <td align="center">
        <b>Dancefloor</b>
        <input type="hidden" name="question_id[]" value="2">
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_2" id="rating_value_2" value="5"
            required>
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_2" id="rating_value_2" value="4">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_2" id="rating_value_2" value="3">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_2" id="rating_value_2" value="2">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_2" id="rating_value_2" value="1">
        </div>
    </td>
</tr>
<tr bgcolor="#FFFFFF" id="row2">
    <td align="center">
        <b>Client Satisfaction</b>
        <input type="hidden" name="question_id[]" value="3">
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_3" id="rating_value_3" value="5"
            required>
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_3" id="rating_value_3" value="4">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_3" id="rating_value_3" value="3">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_3" id="rating_value_3" value="2">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_3" id="rating_value_3" value="1">
        </div>
    </td>
</tr>
<tr id="row3">
    <td align="center">
        <b>Overall Gig</b>
        <input type="hidden" name="question_id[]" value="1">
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_1" id="rating_value_1" value="5"
            required>
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_1" id="rating_value_1" value="4">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_1" id="rating_value_1" value="3">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_1" id="rating_value_1" value="2">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_1" id="rating_value_1" value="1">
        </div>
    </td>
</tr>
<div id="radio_group_error"></div>

此代码是从一些 PHP 代码生成的，因此可以有一组或多个单选按钮。我想做的是确保为页面上的每个组选择至少一个单选按钮（使用 jQuery 进行此检查）。如果未选择至少一个无线电组，那么我希望在 radio_group_error div 中显示一个错误。

关于如何做到这一点的任何想法，因为可以有一个或多个不同的无线电组？

如果有人可以编辑此代码以使其看起来更好，请随意！（感谢科林）

Answer 1

你可以这样做：

var radios = $("input[type=radio]");
var group  = radios.filter("[name=rating_value_x]");
alert((group.filter(":checked").length)?"checked":"not checked");

这将检查组 x 的单选按钮是否被选中。现在遍历所有组，你就完成了。

看例子

编辑：

循环可能如下所示：

   var name = "rating_value_";
    var i = 1;
    var checked = true;
    // loop as long as there are groups available
    while( radios.filter("[name="+name+i+"]").length ){
       // check if there is a checked radio-button in this group
       if (!radios.filter("[name="+name+i+"]").filter(":checked").length){
          // selfdestruct
          checked = false;
       }
       i++;
    }       
    alert(checked?"check-check checked!":"check-check failed!");