Question

我有一系列随机生成的文本框和单选按钮输入。它有点像测验，所以我想做的是收集所有输入并将它们发送到服务器，以便评估它们。

现在，为了方便起见，我将所有的单选按钮输入结束。

我使用以下代码收集文本框类型的输入：

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

这很有效，但在此之后，我不知道该怎么做。我可以循环遍历input:radio:checked元素并将其值添加到我的字符串中，这将完美地工作，除非用户决定提交他们的答案，同时将其中一个单选按钮输入清空。在这种情况下，没有任何东西被添加到字符串中，服务器将错过该问题的答案，并且它会混淆一切。

所以当代码意识到有一个单选按钮问题时，我需要在字符串中添加一些东西，但没有选择答案，但我不知道该怎么做。

编辑：

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>

但问题是，这些问题是随机生成的。所以可以有5个简单的文本框类型输入，然后是5个单选按钮类型的输入，或者可能只有1个单选按钮类型的问题，并且它们的所有属性都是动态生成的，所以我无法真正放入无线电 - 按钮组在代码中的名称，因为我不知道。

Answer 1

您可以使用此功能查看是否全部选中：

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
}

无论你的名字如何改变＆＃34; namevalue＆＃34;那个。可以应用获取值的相同基本逻辑。

注意：可以使用$('input:radio')以上的选择器表单上的现代浏览器获得性能提升。

编辑来自更新的问题：

在这里，我应用了上述技术来遍历每个表单组，查找单选按钮，如果存在，则在该组中未检查任何按钮时抛出警报。如果任何组都具有未选择的无线电选择，您还可以创建并返回布尔值。＆＃34; hasUncheckedRadios＆＃34;如果没有选中则为0或者如果选中一个则为1 - 因为组中的单选按钮只选择一个。您可以在验证中使用此逻辑，以确保所有组都有一个有效的选中单选按钮（如果它们包含一个无线电）;

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

在这里摆弄它：https://jsfiddle.net/MarkSchultheiss/nv7cjpr2/

Answer 2

我会迭代一点：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;
});

可能的结果

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

这将迭代每个组并寻找答案。如果找到一个，则添加该值。如果不是，则会添加null作为结果。

Answer 3

具有无线电的循环类组然后使用.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)...

工作示例：https://jsfiddle.net/nsL3drz5/

JQuery没有选中单选按钮问题

3 个答案: