get the selected radio button using jquery

Question

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);

    }}

An id must be unique, no ifs, no buts; a repeated id is invalid HTML; you should be using a class. — David Thomas
– David Thomas, Commented Mar 27, 2014 at 21:47

faerin · Accepted Answer · 2014-03-27 21:52:22Z

1

Try this:

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

answered Mar 27, 2014 at 21:52

faerin

1,92517 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wopolow · Accepted Answer · 2014-03-27 22:28:07Z

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
}

Flowing Functions · Accepted Answer · 2014-03-27 21:54:55Z

0

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.

answered Mar 27, 2014 at 21:54

Flowing Functions

1

3 Comments

Racil Hilan Over a year ago

Unique IDs in not a matter of "convenience", it is a must to be valid HTML.

Flowing Functions Over a year ago

@RacilHilan True enough, but the convenience was more so related to the variables. I'm editing it now to emphasize the importance of unique id's.

Racil Hilan Over a year ago

And while at it, it would be nice if you wrap your JavaScript with <script> tag, or separate it from the HTML like the OP and other answers. I will not vote your answer down because you're new here and this is an opportunity for you to learn.

VtoCorleone · Accepted Answer · 2014-03-27 21:55:17Z

0

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

answered Mar 27, 2014 at 21:55

VtoCorleone

17.2k5 gold badges40 silver badges52 bronze badges

Comments

dima · Accepted Answer · 2014-03-27 22:23:53Z

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

Collectives™ on Stack Overflow

get the selected radio button using jquery

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related