jQuery：檢查是否有任何單選按鈕未被選中

Question

我參考this question。試圖使用this snipped，但「我的」標記非常難看，我無法改變它。

<form method="post"> 
    <table cellspacing="0" cellpadding="0" border="0" width="100%"> 
    <tr> 
     <td style="padding-left:20px; padding-right:20px"> 
     <table cellspacing="3" cellpadding="2" border="0" width="100%"> 
      <tr> 
      <td valign="top">1.</td> 
      <td valign="top" colspan="2">Question</td> 
      </tr> 
      <tr> 
      <td></td> 
      <td width="5"><input value="question1_yes" name="question1" id="question1_yes" type="radio" /></td> 
      <td><label for="question1_yes">Yes</label></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td><input value="question1_no" name="question1" id="question1_no" type="radio" /></td> 
      <td><label for="question1_no">No</label></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td><input value="question1_dont_know" name="question1" id="question1_dont_know" type="radio" /></td> 
      <td><label for="question1_dont_know">Don't know</label></td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    <tr> 
     <td style="padding-left:20px; padding-right:20px"> 
     <table cellspacing="3" cellpadding="2" border="0" width="100%"> 
      <tr> 
      <td valign="top">2.</td> 
      <td valign="top" colspan="2">Question</td> 
      </tr> 
      <tr> 
      <td></td> 
      <td width="5"><input value="question2_yes" name="question2" id="question2_yes" type="radio" /></td> 
      <td><label for="question2_yes">Yes</label></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td><input value="question2_no" name="question2" id="question2_no" type="radio" /></td> 
      <td><label for="question2_no">No</label></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td><input value="question2_dont_know" name="question2" id="question2_dont_know" type="radio" /></td> 
      <td><label for="question2_dont_know">Don't know</label></td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    <tr> 
     <td style="padding-left:20px; padding-right:20px"> 
     <table cellspacing="3" cellpadding="2" border="0" width="100%"> 
      <tr> 
      <td valign="top">3.</td> 
      <td valign="top" colspan="2">Question</td> 
      </tr> 
      <tr> 
      <td></td> 
      <td width="5"><input value="question3_yes" name="question1" id="question3_yes" type="radio" /></td> 
      <td><label for="question3_yes">Yes</label></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td><input value="question3_no" name="question1" id="question3_no" type="radio" /></td> 
      <td><label for="question3_no">No</label></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td><input value="question3_dont_know" name="question3" id="question1_dont_know" type="radio" /></td> 
      <td><label for="question3_dont_know">Don't know</label></td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    </table> 
    <input type="submit"> 
</form> 

如何更改this snipped？

Answer 1

檢查這個演示

我在第三個問題正確的名稱問題3（是問題1）

我必須插入類查找表（上表類=「表」），並在問題（CLASS = 「問題」）

<form method="post"> 
    <table cellspacing="0" cellpadding="0" border="0" width="100%"> 
    <tr> 
     <td style="padding-left:20px; padding-right:20px"> 
     <table cellspacing="3" cellpadding="2" border="0" width="100%" class="table"> 
      <tr> 
      <td valign="top">1.</td> 
      <td valign="top" class="question" colspan="2">Question</td> 
      </tr> 
      <tr> 
      <td></td> 
      <td width="5"><input value="question1_yes" name="question1" id="question1_yes" type="radio" /></td> 
      <td><label for="question1_yes">Yes</label></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td><input value="question1_no" name="question1" id="question1_no" type="radio" /></td> 
      <td><label for="question1_no">No</label></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td><input value="question1_dont_know" name="question1" id="question1_dont_know" type="radio" /></td> 
      <td><label for="question1_dont_know">Don't know</label></td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    <tr> 
     <td style="padding-left:20px; padding-right:20px"> 
     <table cellspacing="3" cellpadding="2" border="0" width="100%" class="table"> 
      <tr> 
      <td valign="top">2.</td> 
      <td valign="top" class="question" colspan="2">Question</td> 
      </tr> 
      <tr> 
      <td></td> 
      <td width="5"><input value="question2_yes" name="question2" id="question2_yes" type="radio" /></td> 
      <td><label for="question2_yes">Yes</label></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td><input value="question2_no" name="question2" id="question2_no" type="radio" /></td> 
      <td><label for="question2_no">No</label></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td><input value="question2_dont_know" name="question2" id="question2_dont_know" type="radio" /></td> 
      <td><label for="question2_dont_know">Don't know</label></td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    <tr> 
     <td style="padding-left:20px; padding-right:20px"> 
     <table cellspacing="3" cellpadding="2" border="0" width="100%" class="table"> 
      <tr> 
      <td valign="top">3.</td> 
      <td valign="top" class="question" colspan="2">Question</td> 
      </tr> 
      <tr> 
      <td></td> 
      <td width="5"><input value="question3_yes" name="question3" id="question3_yes" type="radio" /></td> 
      <td><label for="question3_yes">Yes</label></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td><input value="question3_no" name="question3" id="question3_no" type="radio" /></td> 
      <td><label for="question3_no">No</label></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td><input value="question3_dont_know" name="question3" id="question1_dont_know" type="radio" /></td> 
      <td><label for="question3_dont_know">Don't know</label></td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    </table> 
    <input type="submit"> 
</form> 

JS

$(document).on('submit', 'form', function() { 

    var validate = true; 
    var unanswered = new Array(); 

    // Loop through available sets 
    $('.table').each(function() { 
     // Question text 
     var question = $(this).find(".question"); 
     // Validate 
     if (!$(this).find('input').is(':checked')) { 
      // Didn't validate ... dispaly alert or do something 
      unanswered.push(question.text()); 
      question.css('color', 'red'); // Highlight unanswered question 
      validate = false; 
     } 
    }); 

    if (unanswered.length > 0) { 
     msg = "Please answer the following questions:\n" + unanswered.join('\n'); 
     alert(msg); 
    } 
    return validate; 
}); 

小提琴 http://jsfiddle.net/ZjmD5/

Answer 2

如果你的標記是固定的，並且考慮到每個問題嵌套在一個表中，你可以檢查檢查輸入的數量，並將它與你有的表格數量進行比較，如下所示：

$('form').on('submit',function(e){ 
    // Counting number of questions 
    arrayQuestions = new Array(); 
    $('input[type=radio').each(function(){ 
     arrayQuestions.push(this.name); 
    }); 

    jQuery.unique(arrayQuestions); 
    nbQuestion = arrayQuestions.length; 
    nbAnsweredQuestion = $('input[type=radio]:checked').length; 
    if(nbAnsweredQuestion < nbQuestion) { 
     alert('You must answer every question'); 
     e.preventDefault(); 
    } 
}); 

見小提琴DEMO HERE

編輯

注意，在你的第三個問題，前兩個答案具有名稱「問題1」，可能是一個錯字...

EDIT2

添加jQuery.unique改善問題計數（以便它不是基於表了）

Answer 3

如果你想確保所有的單選按鈕有至少一個值，這裏是我會做什麼：

var radio_names = ['question1','question2']; 
var form_data = $('form').serializeArray();//Use a better selector by using an ID? 
$.each(form_data,function(index,input){ 
    var radio_index = radio_names.indexOf(input.name) 
    if(radio_index>-1 && input.value!='')//If it is a radio we monitor, and not empty of value 
     radio_names.splice(radio_index, 1);//Remove it from the list, so we know which we are missing 
}); 
if(radio_names.length>0)//We did not fill all radio, display list of unfilled ones 
alert(radio_names); 

在現在英語： 我們列出了我們想要監控，序列化的形式到一個數組所以很容易玩收音機。循環訪問陣列以檢查其中的輸入並移除我們找到的收音機。一旦完成，我們應該留下一個空無線電列表...如果不是，呼喊警告用戶。