CODEWITHSUNDEEP
javascriptjquery
silent_coder14
silent_coder14

Reputation: 583

get the selected radio button using jquery

I have a form which looks like this:

<input type="radio" id="answer0" name="answer0" value="1" />
<input type="radio" id="answer0" name="answer0" value="2" />
<input type="radio" id="answer0" name="answer0" value="3" />
<input type="radio" id="answer0" name="answer0" value="4" />

What I want is to get the selected radio button so I used the jQuery code below.

var id = "#answer0";

var isChecked = $(id).prop('checked');

But I only get a result when the first radio button is checked. No result if I select the second, third and fourth one. Any help please.

Oh sorry. I generated the radio button in php like this...

print '<input type="radio" class="answer'. $q . '" id="answer'. $q . '" name="answer'. $q . '"value="1"/>' . $row['answer1'] .'<br/>';
print '<input type="radio" class="answer'. $q . '" id="answer'. $q . '" name="answer'. $q . '"value="2"/>' . $row['answer2'] .'<br/>';
print '<input type="radio" class="answer'. $q . '" id="answer'. $q . '" name="answer'. $q . '"value="3"/>' . $row['answer3'] .'<br/>';
print '<input type="radio" class="answer'. $q . '" id="answer'. $q . '" name="answer'. $q . '"value="4"/>' . $row['answer4'] .'<br/>';

so I'm sure that the id is unique. What I am trying to do is get the selected radio button value for answer0, answer1 and so on... So far I can only get the first group value (answer0).

my jquery code:

for ( var i = 1; i <=items; i++ ) {
    var t = "answer" + i;

    if($('.' + t).prop('checked')){
        //alert(this.id);
        alert(t);
        correct++;
    }

    alert(correct);

    }}

Upvotes: 0

Views: 300

Answers (5)

wopolow
wopolow

Reputation: 401

ID of element has to be unique.

Give those inputs a class name , for example .radio.

<input type="radio" id="answer0" class='radio' name="answer0" value="1" />
<input type="radio" id="answer1" class='radio' name="answer0" value="2" />
<input type="radio" id="answer2" class='radio' name="answer0" value="3" />
<input type="radio" id="answer3" class='radio' name="answer0" value="4" />

Then:

$('.radio').each(function(){
if($(this).prop('checked')){alert(this.id);}
});

You can see the demo of it here

EDIT : You know, but the class dont have to be unique. In your loop you are not using IDs, you are using diferent class names for each element. So either change the . for # or just do it as it is shown in the Demo

If you want to see all radio's values , then just remove the condition

$('.radio').each(function(){
alert(this.id+" "+this.value);
});

If you want to see value of selected radio only, then:

$('.radio').each(function(){
    if($(this).prop('checked')){alert(this.id+" "+this.value);}
});

My advice

I think you should wrap it into the function like so

function getSelectedRadioValue(){
    $('.radio').each(function(){
        if($(this).prop('checked')){return this.value;}
    });
}

And you can call it whenever you want

if(getSelectedRadioValue()=='1'){
// make some magic
}else{
// more magic
}

Upvotes: 1

dima
dima

Reputation: 1189

IDs should be unique, add a NON-UNIQUE class for them and do the following:

$('input.class:checked').val()

or if you don't want to use classes, use just the name you already have (just make sure IDs are unique - it's a MUST):

$('input[name=answer0]:checked').val()

EDIT: Now that you edited your original post, try this:

print '<input type="radio" class="answer" id="answer'. $q . '" name="answer'. $q . '"value="1"/>' . $row['answer1'] .'<br/>';
print '<input type="radio" class="answer" id="answer'. $q . '" name="answer'. $q . '"value="2"/>' . $row['answer2'] .'<br/>';
print '<input type="radio" class="answer" id="answer'. $q . '" name="answer'. $q . '"value="3"/>' . $row['answer3'] .'<br/>';
print '<input type="radio" class="answer" id="answer'. $q . '" name="answer'. $q . '"value="4"/>' . $row['answer4'] .'<br/>';

and then to get the value just do this:

var value = $('input.answer:checked').val()

now value contains selected value

Upvotes: 0

VtoCorleone
VtoCorleone

Reputation: 17203

Use the class instead of id.

<input type="radio" class="answer0" name="answer0" value="1" />
<input type="radio" class="answer0" name="answer0" value="2" />
<input type="radio" class="answer0" name="answer0" value="3" />
<input type="radio" class="answer0" name="answer0" value="4" />

.

$(function(){
    $('.answer0').on('change', function(){
        alert($(this).val()); 
    });
});

Here's a fiddle

Upvotes: 0

Flowing Functions
Flowing Functions

Reputation: 1

They all share the same ID, unique IDs is a MUST in HTML. Also, it'd be more convenient to hard code individual variables for said IDs.

<input type="radio" id="answer0" name="answer0" value="1" />
<input type="radio" id="answer1" name="answer1" value="2" />
<input type="radio" id="answer2" name="answer2" value="3" />
<input type="radio" id="answer3" name="answer3" value="4" />

var id0 = "answer0";

var isChecked = $(id0).prop('checked');

and so on.

Upvotes: 0

faerin
faerin

Reputation: 1925

Try this:

$("input:radio[name=answer0]").click(function(){;
    alert($(this).val());
    });

Upvotes: 1

Related Questions