Динамические переключатели

Question

У меня есть страница с радиокнопками, и она не будет отображаться «Успешно: вы все вопросы» выполнили динамически.

HTML:

Question 1:<br /> 
    <label><input name="income" type="radio" value="1" />10,000</label> <br /> 
    <label><input name="income" type="radio" value="3" />30,000</label> <br /> 
    <label><input name="income" type="radio" value="5" />50,000</label> <br /> 

    Question 2:<br /> 
    <label><input name="debt" type="radio" value="1" />10,000</label> <br /> 
    <label><input name="debt" type="radio" value="5" />50,000</label> <br /> 
    <label><input name="debt" type="radio" value="10" />10,000</label> <br /> 

    <div id="display">0</div> 

сценарий:

$('#display').each(function(){ 
    if($(':radio[name=income]:checked, :radio[name=debt]:checked').length == 2) 
    $("#display").html('<p>Success: You have completed all questions</p>'); 
    else 
    $("#display").html('<p>You have NOT yet completed all questions</p>'); 
}); 

Спасибо если вы можете помочь.

http://jsfiddle.net/C7NmD/

Answer 1

Вы должны добавить код на слушателя событий. В настоящее время вы запускаете код только один раз, при загрузке страницы. После привязки прослушивателя событий (change) код будет запускаться при каждом изменении состояния input[type=radio]. см http://jsfiddle.net/C7NmD/1/

$(":radio").change(function(){ 
    $('#display').each(function(){ 
     if($(':radio[name=income]:checked, :radio[name=debt]:checked').length == 2) 
      $("#display").html('<p>Success: You have completed all questions</p>'); 
     else 
      $("#display").html('<p>You have NOT yet completed all questions</p>'); 
    }); 
}); 

Answer 2

Если я правильно понял .. Вам не нужно много коды ..
Попробуйте код ниже ..

$('input').live('change',function() 
{ 
    if($(':radio:checked').size() > 1) // One is number of Questions-1 in your case.. 
    { 
    $('#display').html('Answered all.') 
    } 
}); 

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

http://jsfiddle.net/C7NmD/4/ 

Answer 3

Могу ли я предложить адаптацию к вашей разметке, которая должна облегчить реализацию этой функции? Содержащие каждый из ваших вопросов в элементе, в моем предложении fieldset, позволяет увеличить число вопросов без необходимости вручную перечислять каждую :radio[name="radioName"]:

<fieldset> 
    <legend>Question 1:</legend> 
    <label><input type="radio" value="1" name="income" />10,000</label> <br /> 
    <label><input name="income" type="radio" value="3" />30,000</label> <br /> 
    <label><input name="income" type="radio" value="5" />50,000</label> <br /> 
</fieldset> 

<fieldset> 
    <legend>Question 2:</legend> 
    <label><input type="radio" value="1" name="debt" />10,000</label> <br /> 
    <label><input name="debt" type="radio" value="5" />50,000</label> <br /> 
    <label><input type="radio" value="10" name="debt" />10,000</label> <br /> 
</fieldset> 

<div id="display">0</div> 

И JQuery:

$('input:radio').click(
    function() { 
     var q = $('fieldset').length; 
     console.log('q: ' + q + '; checked: ' + $('input:radio:checked').length); 
     if ($('input:radio:checked').length == q){ 
      $('#display').text('Congratulations! You\'ve completed all questions!'); 
     } 
     else { 
      $('#display').text('You\'ve not yet finished...'); 
     } 
    }); 

JS Fiddle demo.