动态单选按钮

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。