javascript - JQuery 没有单选按钮检查问题

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
} 

无论您的名字是什么，请将“namevalue”更改为该名称。可以应用相同的基本逻辑来获取值。

注意:现代浏览器在上述选择器表单上的性能比 $('input:radio') 可以获得更高的性能。

编辑来自更新的问题:

在这里，我应用了上面的技术来遍历每个表单组以查找单选按钮，如果它们存在，并且在该组内没有检查任何按钮，则抛出警报。如果任何组都有未选择的单选选项，您还可以创建并返回 bool 值。如果没有选中，“hasUncheckedRadios”将为 0；如果选中一个，则“hasUncheckedRadios”将为 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/