How to change the value of radio buttons using Javascript/Jquery

Question

Say I have this radio:

<form name="myForm">
  <input type="radio" name="foo" value="1"> 1
  <input type="radio" name="foo" value="2"> 2
</form>

I'm looking for a way to do something like this:

document.myForm.foo.value = "2";

In order to dynamically select the 2nd radio button. Or a way to do the following using jquery.

So, do you want to cause a radio where the value is 2 to be selected, or do you want to change the value of the second radio button to 2? Your question is kind of unclear. — Daedalus
– Daedalus, Commented May 12, 2012 at 1:52

Elliot Bonneville · Accepted Answer · 2012-05-12 01:49:51Z

3

jQuery selector:

$('input[value="2"][name="foo"]')

answered May 12, 2012 at 1:49

Elliot Bonneville

53.6k23 gold badges101 silver badges125 bronze badges

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

3 Comments

Ali Over a year ago

what if I have more than 1 radios or inputs?

Ali Over a year ago

What if I have more than one sets of radios who both have values of 2? e.g <input name = foo value = 2 /> and <input name = bar value = 2 /> and I want to only select the foo one

Elliot Bonneville Over a year ago

@ClickUpvote: Answer updated to match two selectors as per request.

Somnath Muluk · Accepted Answer · 2012-06-07 04:54:18Z

2

Use this:

$('[name="foo"]').val(2);

edited Jun 7, 2012 at 4:54

Somnath Muluk

58.3k39 gold badges225 silver badges230 bronze badges

answered May 12, 2012 at 9:20

Thulasiram

8,5628 gold badges48 silver badges54 bronze badges

Comments

Selvakumar Arumugam · Accepted Answer · 2012-05-12 01:54:26Z

0

Are you looking for something like $(':radio[name=foo]:eq(1)')

DEMO

answered May 12, 2012 at 1:54

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Comments

elclanrs · Accepted Answer · 2012-05-12 01:55:23Z

0

If you grab all your radios by name in a jQuery collection, then you can select by index with eq().

$('input[name="foo"]').eq(1) // 2nd input

answered May 12, 2012 at 1:55

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Comments

Chase · Accepted Answer · 2012-05-12 02:08:16Z

0

Since you requested this way, you could do:

document.myForm.foo[1].checked = true; //selects the 2nd radio button

Here's an example: http://jsfiddle.net/bTzqw/

edited May 12, 2012 at 2:08

answered May 12, 2012 at 1:54

Chase

29.6k1 gold badge52 silver badges49 bronze badges

Comments

Danilo Valente · Accepted Answer · 2012-05-12 01:48:14Z

-1

document.getElementsByName('foo')[1].check();//Or .checked = true

answered May 12, 2012 at 1:48

Danilo Valente

11.4k8 gold badges55 silver badges71 bronze badges

3 Comments

Ali Over a year ago

Won't work because what if I want to move the radio options around?

j08691 Over a year ago

If you want something that addresses that question it should be part of your original question.

Danilo Valente Over a year ago

it's just a fast example that shows you can select it by his name. So, the better solutiuon is to keep the same name but set different ids, like option1 and option2

Collectives™ on Stack Overflow

How to change the value of radio buttons using Javascript/Jquery

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related