JQuery Не зарегистрирована проблема с радиокнопкой

Question

У меня есть серия случайных сгенерированных текстовых и радио-кнопок. Это похоже на Quiz, поэтому мне хотелось бы собрать все входные данные и отправить их на сервер, чтобы они могли их оценить.

Теперь, чтобы это стало проще, я поместил все входы переключателей в конец.

Я использую следующий код, чтобы собрать входы текстового поля-типов:

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

Это отлично работает, но после этого, я не знаю, что делать. Я мог бы прокрутить элементы input:radio:checked и добавить значение для моей строки, что будет работать отлично, за исключением случаев, когда пользователь решает отправить свои ответы, оставив один из пустых радиокнопок. В этом случае ничто не добавляется в строку, и серверу не будет ответа на этот вопрос, и он все испортит.

Поэтому мне нужно добавить что-то в свою строку, когда код понимает, что есть вопрос с переключателем, но ответа не было, но я понятия не имею, как это сделать.

Edit:

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 типов кнопок с радиокнопками или может быть только один вопрос с типом радио кнопки, и все их атрибуты генерируются динамически, поэтому я не могу поместить радио- название группы кнопок в коде, потому что я этого не знаю.

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 
} 

независимо ваше имя изменить «имя-значение» для этого. Та же базовая логика для получения значений может быть применена.

Примечание: для современных браузеров можно использовать коэффициент усиления для этих форм выбора выше $('input:radio').

EDIT От обновленного вопроса:

Здесь я применил технику выше, чтобы пройти через каждую из форм групп ищет радио кнопок, и если они существуют сгенерировано предупреждение, если никто не проверяются в рамках этой группы. Вы также можете создавать и возвращать логическое значение, если у ЛЮБОЙ группы есть выбор радио, при этом ни один из них не выбран. «hasUncheckedRadios» будет либо 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/