Итерация через группу переключателей и подготовка строки выбранных опций

Question

У меня есть тестовая страница, на которой есть несколько вопросов по 4 опциям.

<div class="question"> 
     <p>Who invented C?</p> 
     <ul> 
      <li><input type="radio" name="1" value='a'/>A. James Gowsling</li> 
      <li><input type="radio" name="1" value='b'/>B. Dennis Ritchie</li> 
      <li><input type="radio" name="1" value='c'/>C. Larry Wall</li> 
      <li><input type="radio" name="1" value='d'/>D. Bob Peterson</li> 
     </ul> 
    </div> 
    <div class="question"> 
     <p>Who invented Java?</p> 
     <ul> 
      <li><input type="radio" name="2" value='a'/>A. James Gowsling</li> 
      <li><input type="radio" name="2" value='b'/>B. Dennis Ritchie</li> 
      <li><input type="radio" name="2" value='c'/>C. Larry Wall</li> 
      <li><input type="radio" name="2" value='d'/>D. Bob Peterson</li> 
     </ul> 
    </div> 

Я хочу, чтобы найти выбранные пользователем (а, Ь, с или d) варианты и добавить их и передать в виде строки в submitTest.php случае .в он не пытается вопрос, я хочу pass z. eb abbzd

Я пробовал это, и он работает, но как я могу обработать «непроверенный» вопрос и вместо этого передать z.

$('document').ready(function() { 
    $('#submit').click(function() { 
     var string = ''; 
     $('.question').each(function() { 
      $('input[type="radio"]').each(function() { 
       if ($(this).is(':checked')) 
        string += $(this).val(); 
      }); 
     }); 
     alert(string); 
    }); 
}); 

Во-вторых, если пользователь не хочет, чтобы попытаться любой вопрос и по ошибке нажимает на любой вариант, то он не может вернуться back.I означает, что он вынужден выбрать одну из радио-кнопки в group.How могу ли я исправить эту проблему?

Answer 1

Первый Probleme

Вам не нужно перебирать на вход, просто проверить, если выбран один:

$('.question').each(function() { 
    string += $(this).find('input:checked').length ? $(this).find('input:checked').val() : 'z'; 
}); 

Второй

Используйте этот флажок и этот код:

$('.question input').change(function(){ 
    $(this).closest('.question').find('input').not(this).prop('checked', false); 
}) 

Answer 2

Вы уже проверяете наличие checked, поэтому просто примените условие else.

$('input[type="radio"]').each(function() { 
    if ($(this).is(':checked')) { 
     string += $(this).val(); 
    } else { 
     string += 'z'; 
    } 
}); 

Deselecting радиокнопки покрыта на SO уже: Javascript/ JQuery Deselecting radio buttons

Answer 3

Вы можете использовать как этот

var a1 = document.querySelector('input[name="1"]:checked'); 
var b1 = document.querySelector('input[name="2"]:checked'); 

if (a1 != null) 
    a1 = a1.value; 
else 
    a1 = ‘’; 
if (b1 != null) 
    b1 = b1.value; 
else 
    b1 = ‘’; 

alert(a1 + ‘ ’ + b1); 

Answer 4

JQuery картографирование функция идеально подходит для такого рода вещи. Также я добавил кнопку Очистить, чтобы очистить ответ, если пользователь хочет, чтобы сделать это:

Html:

<div class="question"> 
    <p>Who invented C?</p> 
    <ul> 
     <li> 
      <input type="radio" name="1" value='a' />A. James Gowsling</li> 
     <li> 
      <input type="radio" name="1" value='b' />B. Dennis Ritchie</li> 
     <li> 
      <input type="radio" name="1" value='c' />C. Larry Wall</li> 
     <li> 
      <input type="radio" name="1" value='d' />D. Bob Peterson</li> 
     <li><button class="clear">Clear answer</button></li> 
    </ul> 
</div> 

Javascript:

$('document').ready(function() { 
    $('#submit').click(function() { 
     var m = $("ul").map(function() { 
      var $checked = $(this).find(":radio:checked"); 
      if ($checked.size() > 0) { 
       return $checked.val(); 
      } else { 
       return "z"; 
      } 
     }); 
     console.log(m); 
    }); 

    $("button.clear").on("click", function() { 
     $(this).closest("ul").find(":radio").prop("checked", false); 
    }); 
});