jQuery的单选按钮没有检查问题

Question

I have a series of randomly generated textbox and radio-button inputs. It's kinda like a Quiz, so what I would like to do is collect all of the inputs and send them to the server so it can evaluate them.

Now, to make it easier, I put all of the radio-button inputs to the end.

I use the following code to collect the inputs of the textbox-types:

$('#button_submit').click(function() {
  var answer_list = '';
  $('input:text').each(function(index,data) {
    answer_list = answer_list + '$' + $(data).val();
  }
  ...
}

This works perfectly, but after this, I don't know what to do. I could loop through the input:radio:checked elements and add the value of those to my string, which would work perfectly, except if the user decides to submit their answers while leaving one of the radio-button inputs empty. In that case, nothing gets added to the string and the server will be missing the answer to that question and it messes everything up.

So I need to add something to my string when the code realizes that there is a radio-button question, but no answer was chosen, but I have no idea how to do it.

Edit:

HTML example:

<div class="form-group" id="form-group-34">
  <label class="control-label " for="question">What is 92848 &#x00D7; 71549?</label>
  <input autofocus="true" class="form-control" id="input34" name="answer" size="20" type="text" value="">
</div>
<div class="form-group" id="form-group-35">
  <label class="control-label " for="question">Is 194 divisible by 3?</label>
  <br><input id="14-answer-0" name="14-answer" type="radio" value="1">
    <label for="14-answer-0">Yes</label>
  <br><input id="14-answer-1" name="14-answer" type="radio" value="0">
    <label for="14-answer-1">No</label>
</div>
<div class="form-group" id="form-group-36">
  <label class="control-label " for="question">Determine the day of the week for 1954 Jun 26!</label>
  <br><input id="35-answer-0" name="35-answer" type="radio" value="1">
    <label for="35-answer-0">Monday</label>
  <br><input id="35-answer-1" name="35-answer" type="radio" value="2">
    <label for="35-answer-1">Tuesday</label>
  <br><input id="35-answer-2" name="35-answer" type="radio" value="3">
    <label for="35-answer-2">Wednesday</label>
  <br><input id="35-answer-3" name="35-answer" type="radio" value="4">
    <label for="35-answer-3">Thursday</label>
  <br><input id="35-answer-4" name="35-answer" type="radio" value="5">
    <label for="35-answer-4">Friday</label>
  <br><input id="35-answer-5" name="35-answer" type="radio" value="6">
    <label for="35-answer-5">Saturday</label>
  <br><input id="35-answer-6" name="35-answer" type="radio" value="0">
    <label for="35-answer-6">Sunday</label>
</div>

But the problem is, that these questions are randomly generated. So there can be 5 simple textbox-type inputs, then 5 radio-button type ones, or there might be only 1 radio-button type question, and all of their attributes are generated dynamically, so I can't really put the radio-button group's name in the code, because I don't know it.

Answer 1

You could use this to see if they are all checked:

var allRadios = $('input[name="namevalue"][type=radio]').length; 

var allCheckedRadios $('input[name="namevalue"][type=radio]').filter(function()   {
    return this.checked;
}).length;

if( allRadios == allCheckedRadios){
// do what you need
} 

whatever your name is change "namevalue" to that. The same basic logic to get the values can be applied.

Note: performance gain for modern browsers on these selector forms above over $('input:radio') can be had.

EDIT From updated question:

Here I applied the techniques above to walk through each of the form groups looking for radio buttons, and if they exist throw an alert if none are checked within that group. You could also create and return a Boolean value if ANY of the groups have radio selections with none selected. "hasUncheckedRadios" will be either 0 if none are checked or 1 if one is checked - since radio buttons within a group only select one. You could use this logic in your validation to ensure that all of the groups have a valid checked radio button (IF they contain a radio that is);

function checkRadios() {
  var allGroups = $('.form-group');
  allGroups.each(function() {
    var allRadios = $(this).find('input[type=radio]').length;
    var hasUncheckedRadios = $(this).find('input[type=radio]').filter(function() {
      return this.checked;
    }).length;
    console.log('total:' + allRadios + ' checked:' + hasUncheckedRadios);
    // if allRadios is > 0 then radios exist and hasUncheckedRadios == 0 none are checked
    if (allRadios && !hasUncheckedRadios) {
      alert("Form Group" + $(this).attr('id') + " has radio buttons unaswered");
    }
  });
}
$('#checkem').on('click', function() {
  console.log('checking...');
  checkRadios();
});

fiddle with it here: https://jsfiddle.net/MarkSchultheiss/nv7cjpr2/

Answer 2

I would iterate a bit more: https://jsfiddle.net/Twisty/ghc7u2ab/

HTML

<div class="form-group" id="form-group-34">
  <label class="control-label " for="question">What is 92848 &#x00D7; 71549?</label>
  <input autofocus="true" class="form-control" id="input34" name="answer" size="20" type="text" value="">
</div>
<div class="form-group" id="form-group-35">
  <label class="control-label " for="question">Is 194 divisible by 3?</label>
  <br>
  <input id="14-answer-0" name="14-answer" type="radio" value="1">
  <label for="14-answer-0">Yes</label>
  <br>
  <input id="14-answer-1" name="14-answer" type="radio" value="0">
  <label for="14-answer-1">No</label>
</div>
<div class="form-group" id="form-group-36">
  <label class="control-label " for="question">Determine the day of the week for 1954 Jun 26!</label>
  <br>
  <input id="35-answer-0" name="35-answer" type="radio" value="1">
  <label for="35-answer-0">Monday</label>
  <br>
  <input id="35-answer-1" name="35-answer" type="radio" value="2">
  <label for="35-answer-1">Tuesday</label>
  <br>
  <input id="35-answer-2" name="35-answer" type="radio" value="3">
  <label for="35-answer-2">Wednesday</label>
  <br>
  <input id="35-answer-3" name="35-answer" type="radio" value="4">
  <label for="35-answer-3">Thursday</label>
  <br>
  <input id="35-answer-4" name="35-answer" type="radio" value="5">
  <label for="35-answer-4">Friday</label>
  <br>
  <input id="35-answer-5" name="35-answer" type="radio" value="6">
  <label for="35-answer-5">Saturday</label>
  <br>
  <input id="35-answer-6" name="35-answer" type="radio" value="0">
  <label for="35-answer-6">Sunday</label>
</div>
<button id="button_submit">Submit</button>

JQuery

$("#button_submit").click(function() {
  var answer_list = {};
  $(".form-group").each(function(i, v) {
    console.log("Index:", i, "ID: [", $(v).attr("id"), "]");
    answer_list[$(v).attr("id")] = {};
    var ind = $(v).find("input");
    $.each(ind, function(i2, el) {
      console.log("Type of Element:", $(el).attr("type"));
      switch ($(el).attr("type")) {
        case "text":
          answer_list[$(v).attr("id")][$(el).attr("id")] = ($(el).val() != "") ? $(el).val() : null;
          break;
        case "radio":
          var isAnswered = false;
          $(el).each(function(i3, rad) {
            if ($(rad).is(":checked")) {
              answer_list[$(v).attr("id")][$(rad).attr("name")] = $(rad).val();
              isAnswered = true;
            }
            if (!isAnswered) {
              answer_list[$(v).attr("id")][$(el).eq(0).attr("name")] = null;
            }
          });
          break;
      }
    });
  });
  console.log(answer_list);
  return false;
});

Possible Result

answer_list: {
  form-group-34: {
    input34: null
  },
  form-group-35: {
    14-answer: 0
  },
  form-group-36: {
    35-answer: null
  }
}

This will iterate each group and look for an answer. If one is found, the value is added. If not, null is added as the result.

Answer 3

loop class group that has radio then use .prop("checked")

  var frmGroup= 0, checked= 0;
  $('.form-group').each(function(index) {
    if ($(this).children('input:radio').length > 0) {
      frmGroup++;
      $(this).children('input:radio').each(function(index) {
        if ($(this).prop("checked") == true) {
          checked++;
        }
      });
    }
  });

  if(frmGroup != checked)...

working example: https://jsfiddle.net/nsL3drz5/