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

如果我理解正确..你不需要那么多代码..
请尝试以下代码..

 $('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 2

您必须将代码添加到事件侦听器。目前，您只在页面加载时运行一次代码。绑定事件侦听器（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 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

动态单选按钮

3 个答案: