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?](https://stackoverflow.com/questions/8926378/how-to-select-an-input-element-by-value-using-javascript) — H77, Jan 12 '19 at 03:07

score 1 · Accepted Answer · answered Jan 12 '19 at 03:07

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 '19 at 03:07

Daniel Doblado

2,481
1
16
24

I'm using this website to test it out in the consoles but it says "Uncaught TypeError: Cannot read property 'click' of null at :1:48" – frosty Jan 12 '19 at 03:11
I don't think you can use the console directly in that site, but if you add `` to the editor and the press run you can see that works, I would recomend other online editor for this tests. – Daniel Doblado Jan 12 '19 at 03:19
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. – frosty Jan 12 '19 at 03:24
This is an example working on JSfiddle https://jsfiddle.net/hwraq6Le/ and here is a gif working on your site, I honestly don't understand what you are doing differently .https://i.ibb.co/tztbn1Q/Peek-2019-01-12-04-29.gif – Daniel Doblado Jan 12 '19 at 03:34
1

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. – frosty Jan 12 '19 at 03:40
Just one last question, I promise. This doesn't seem to work if it's inside an iframe. For example: http://chatwithibot.com/test2.php I put it inside an iframe and it stopped working. Any way to fix that? Thanks. – frosty Jan 12 '19 at 03:55
Unfortunately for security reasons you can't execute js directly to modify the iframe, I would recommend you to read about the [postMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) in order to do it but implementing this requires more code and goes away the scope of your initial question. – Daniel Doblado Jan 12 '19 at 04:03
I started a new question here: https://stackoverflow.com/questions/54156736/using-javascript-to-select-a-radio-button-inside-an-iframe I will upvote and accept if you can help me find a way around this. – frosty Jan 12 '19 at 04:17

score 0 · Answer 2 · answered Jan 12 '19 at 03:13

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

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

2 Answers2