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

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.
}

HTML Code

<input type="radio" name="offline_payment_method" value="Cheque" >
<input type="radio" name="offline_payment_method" value="Wire Transfer" >

Javascript Code:

var off_payment_method = document.getElementsByName('offline_payment_method');
var ischecked_method = false;
for ( var i = 0; i < off_payment_method.length; i++) {
    if(off_payment_method[i].checked) {
        ischecked_method = true;
        break;
    }
}
if(!ischecked_method)   { //payment method button is not checked
    alert("Please choose Offline Payment Method");
}

Note this behavior wit jQuery when getting radio input values:

$('input[name="myRadio"]').change(function(e) { // Select the radio input group

    // This returns the value of the checked radio button
    // which triggered the event.
    console.log( $(this).val() ); 

    // but this will return the first radio button's value,
    // regardless of checked state of the radio group.
    console.log( $('input[name="myRadio"]').val() ); 

});

So $('input[name="myRadio"]').val() does not return the checked value of the radio input, as you might expect -- it returns the first radio button's value.

I used spread operator and some to check least one element in the array passes the test.

I share for whom concern.

var checked = [...document.getElementsByName("gender")].some(c=>c.checked);
console.log(checked);

<input type="radio" name="gender" checked value="Male" /> Male
<input type="radio" name="gender"  value="Female" / > Female

There is very sophisticated way you can validate whether any of the radio buttons are checked with ECMA6 and method .some().

Html:

<input type="radio" name="status" id="marriedId" value="Married" />
<input type="radio" name="status" id="divorcedId" value="Divorced" />

And javascript:

let htmlNodes = document.getElementsByName('status');

let radioButtonsArray = Array.from(htmlNodes);

let isAnyRadioButtonChecked = radioButtonsArray.some(element => element.checked);

isAnyRadioButtonChecked will be true if some of the radio buttons are checked and false if neither of them are checked.

if(document.querySelectorAll('input[type="radio"][name="name_of_radio"]:checked').length < 1)

Return all checked element in the radio button

  Array.from(document.getElementsByClassName("className")).filter(x=>x['checked']);

So basically, what this code does is to loop through a nodeList that contains all the input elements. In case one of these input elements is of type radio and is checked then do something and break the loop.

If the loop doesn't detect an input element been selected, the boolean variable selected will stay false, and applying a conditional statement we can execute something for this case.

let inputs = document.querySelectorAll('input')
let btn = document.getElementById('btn')
let selected = false

function check(){
  for(const input of inputs){
    if(input.type === 'radio' && input.checked){
      console.log(`selected: ${input.value}`) 
      selected = true
      break
    }
  }
  if(!selected) console.log(`no selection`)
}

btn.addEventListener('click', check)

<input type="radio" name="option" value="one">
<label>one</label>
<br>
<input type="radio" name="option" value="two">
<label>two</label>
<br>
<br>
<button id="btn">check selection</button>

Try

[...myForm.sex].filter(r=>r.checked)[0].value

function check() {
  let v= ([...myForm.sex].filter(r=>r.checked)[0] || {}).value ;
  console.log(v);
}

<form id="myForm">
  <input name="sex" type="radio" value="men"> Men
  <input name="sex" type="radio" value="woman"> Woman
</form>
<br><button onClick="check()">Check</button>