jQuery：检查是否未选中任何单选按钮

Question

我指的是this question。尝试使用this snipped，但是＆＃34;我的＆＃34;标记非常难看，我无法改变它。

<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

如果您的标记已修复并且考虑到每个问题都嵌套在一个表中，您只需检查已检查输入的数量并将其与您拥有的表数（在主表中）进行比较，如下所示：

$('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

修改

请注意，在您的第三个问题中，第一个答案的第二个答案的名称为＆＃34; question1＆＃34;，可能是一个错字......

<强> EDIT2

添加jQuery.unique以改进问题计数（因为它不再基于表格）

Answer 2

如果您要确保所有单选按钮至少有一个值，我会这样做：

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

现在用英语： 我们列出了我们想要监控的无线电，将表格序列化为一个数组，以便更容易玩。循环遍历数组以检查其中的输入并删除我们找到的无线电。完成后，我们应该留下一个空的无线电列表......如果没有，请大声警告用户。

Answer 3

查看此演示

我在第三个问题中有正确的名称问题3（问题1）

我有插入类来查找表（在table class =“table”上）和问题（class =“question”）

<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/