動態單選按鈕

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。