CODEWITHSUNDEEP
jquery
Dan
Dan

Reputation: 85

Dynamic radio buttons

I have a page full of radio buttons and it won't display "Success: You have completed all questions" dynamically.

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>

script:

$('#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>');
});

Thank if you can help.

http://jsfiddle.net/C7NmD/

Upvotes: 0

Views: 292

Answers (3)

David Thomas
David Thomas

Reputation: 253308

Might I suggest an adaptation to your mark-up that should make it easier to implement this functionality? Containing each of your questions in an element, in my suggestion a fieldset, allows you to increase the number of questions without having to manually list each and every :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>

And 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.

Upvotes: 1

Exception
Exception

Reputation: 8379

If i understood correctly.. You don't need that much code..
Try the below code..

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

Because only one answer is possible for each group of radio buttons you just check the checked radio buttons size..
Here is the working fiddle 

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

Upvotes: 3

Rob W
Rob W

Reputation: 348972

You have to add the code to an event listener. Currently, you're running the code only once, at page load. After binding an event listener (change), the code will run at each input[type=radio] state change. see 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>');
    });
});

Upvotes: 1

Related Questions