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的单选按钮。现在迭代所有组，你就完成了。

参见 the example

编辑：

循环可能如下所示：

   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!");

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

1 个答案: