How can I check whether a radio button is selected with JavaScript?

ID : 10109

viewed : 30

Tags : javascriptradio-buttonjavascript

Top 5 Answer for How can I check whether a radio button is selected with JavaScript?

vote vote

99

Let's pretend you have HTML like this

<input type="radio" name="gender" id="gender_Male" value="Male" /> <input type="radio" name="gender" id="gender_Female" value="Female" /> 

For client-side validation, here's some Javascript to check which one is selected:

if(document.getElementById('gender_Male').checked) {   //Male radio button is checked }else if(document.getElementById('gender_Female').checked) {   //Female radio button is checked } 

The above could be made more efficient depending on the exact nature of your markup but that should be enough to get you started.


If you're just looking to see if any radio button is selected anywhere on the page, PrototypeJS makes it very easy.

Here's a function that will return true if at least one radio button is selected somewhere on the page. Again, this might need to be tweaked depending on your specific HTML.

function atLeastOneRadio() {     return ($('input[type=radio]:checked').size() > 0); } 

For server-side validation (remember, you can't depend entirely on Javascript for validation!), it would depend on your language of choice, but you'd but checking the gender value of the request string.

vote vote

85

With jQuery, it'd be something like

if ($('input[name=gender]:checked').length > 0) {     // do something here } 

Let me break that down into pieces to cover it more clearly. jQuery processes things from left to right.

input[name=gender]:checked 
  1. input limits it to input tags.
  2. [name=gender] limits it to tags with the name gender within the previous group.
  3. :checked limits it to checkboxes/radio buttons that are selected within the previous group.

If you want to avoid this altogether, mark one of the radio buttons as checked (checked="checked") in the HTML code, which would guarantee that one radio button is always selected.

vote vote

78

A vanilla JavaScript way

var radios = document.getElementsByTagName('input'); var value; for (var i = 0; i < radios.length; i++) {     if (radios[i].type === 'radio' && radios[i].checked) {         // get value, set checked flag or do whatever you need to         value = radios[i].value;            } } 
vote vote

62

Just trying to improve on Russ Cam's solution with some CSS selector sugar thrown in with the vanilla JavaScript.

var radios = document.querySelectorAll('input[type="radio"]:checked'); var value = radios.length>0? radios[0].value: null; 

No real need for jQuery here, querySelectorAll is widely supported enough now.

Edit: fixed a bug with the css selector, I've included the quotes, although you can omit them, in some cases you can't so it's better to leave them in.

vote vote

60

You can use this simple script. You may have multiple radio buttons with same names and different values.

var checked_gender = document.querySelector('input[name = "gender"]:checked');  if(checked_gender != null){  //Test if something was checked alert(checked_gender.value); //Alert the value of the checked. } else { alert('Nothing checked'); //Alert, nothing was checked. } 

Top 3 video Explaining How can I check whether a radio button is selected with JavaScript?

Related QUESTION?