表格前验证多个无线电组提交

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

你可以做这样的事情：如果组X的单选按钮被选中

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

此检查。现在遍历所有组，然后完成。

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