Using javascript to check a radio button by it's value

Question

There is 3 radio buttons on a website, and I want to use javascript to check the radio button that says "female". How would I do that?

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other

document.getElementsByValue("female").checked = true;

Possible duplicate of How to select an input element by value using javascript? — H77
– H77, Commented Jan 12, 2019 at 3:07

Daniel Doblado · Accepted Answer · 2019-01-12 03:07:02Z

1

With document.querySelector("input[value='female']" you can select it with the value.

document.querySelector("input[value='female']").click()

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other

answered Jan 12, 2019 at 3:07

Daniel Doblado

2,9381 gold badge18 silver badges24 bronze badges

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

8 Comments

frosty Over a year ago

I'm using this website to test it out in the consoles but it says "Uncaught TypeError: Cannot read property 'click' of null at <anonymous>:1:48"

Daniel Doblado Over a year ago

I don't think you can use the console directly in that site, but if you add <script> document.querySelector("input[value='female']").click() </script> to the editor and the press run you can see that works, I would recomend other online editor for this tests.

frosty Over a year ago

document.querySelectorAll('input[value="female"]').checked = true; seems to work in the console on a different website, but the physical radio button doesn't seem to be checked.

Daniel Doblado Over a year ago

This is an example working on JSfiddle jsfiddle.net/hwraq6Le and here is a gif working on your site, I honestly don't understand what you are doing differently .i.ibb.co/tztbn1Q/Peek-2019-01-12-04-29.gif

frosty Over a year ago

Never mind, you're right. The click function wasn't working initially on the w3school website, so I switched over to using document.querySelectorAll('input[value="female"]').checked = true and that wasn't working. It's working now, thanks.

|

Rahul Rana · Accepted Answer · 2019-01-12 03:13:37Z

0

You can get value by binding this to function and accessing the boolean value with .checked and .name which value is checked

function radionButtonChecked(e) {
  console.log(e.checked, "  ",e.value);
}

<input type="radio" name="gender" value="male" onclick="radionButtonChecked(this)"> Male<br>
<input type="radio" name="gender" value="female" onclick="radionButtonChecked(this)"> Female<br>
<input type="radio" name="gender" value="other" onclick="radionButtonChecked(this)"> Other

answered Jan 12, 2019 at 3:13

Rahul Rana

4652 silver badges8 bronze badges

Collectives™ on Stack Overflow

Using javascript to check a radio button by it's value

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related