表格前驗證多個無線電組提交

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