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

在现在英语： 我们列出了我们想要监控，序列化的形式到一个数组所以很容易玩收音机。循环访问阵列以检查其中的输入并移除我们找到的收音机。一旦完成，我们应该留下一个空无线电列表...如果不是，呼喊警告用户。