Javascript code to select the Radio button which is a nested element

Question

I have some radio buttons on an application and I would like to write a JavaScript function to select the appropriate radio button. When I inspect the code behind the page, I see a lot of nested elements where each radio button is a div class and each div contains the Label. For example:

<div data-test-automation-id="roleRadio4312028" class="form-element form-group">
    <div class="form-control__container outlined">
        <div class="radio">
            <label title="">
                <input name="roleId" variant="1" type="radio" data-test-automation-id="input" value="4312028">
                <span data-test-automation-id="label" class="">Radio Button 1</span>
            </label>
        </div>
    </div>
</div>
<div data-test-automation-id="roleRadio4312028" class="form-element form-group">
    <div class="form-control__container outlined">
        <div class="radio">
            <label title="">
                <input name="roleId" variant="1" type="radio" data-test-automation-id="input" value="4312028">
                <span data-test-automation-id="label" class="">Radio Button 2</span></label>
        </div>
    </div>
</div>

How do I write a javascript function to effectively select the radio button I want? I would like to run this function in the console to ensure the correct radio button is selected.

The javascript function that I am thinking of is:

function selectRadioButton(choice){
//document.getElementById OR document.getElementByName()

}

Thanks in advance

"I would like to write a JavaScript function", well try then, we will help when you get stuck, planty of examples here on SO, also there is 100% answer already here for what you need. Also how should we know witch "radio button I want"... https://stackoverflow.com/questions/21166860/check-a-radio-button-with-javascript ... — ikiK, Mar 17 '21 at 17:35

TheEagle · Accepted Answer · 2021-03-17T19:26:57.777

function checkRadio(index, checked=true) {
  radioButtons = document.querySelectorAll('.form-element > .form-control__container > .radio > label > input[type="radio"]');
  radioButtons[index].checked = checked;
}

function getCheckedRadio() {
  radioButtons = document.querySelectorAll('.form-element > .form-control__container > .radio > label > input[type="radio"]');
  for (var i=0; i < radioButtons.length; i++) {
    if (radioButtons[i].checked == true) {
      return i;
    }
  }
  return -1;
}
checkRadio(0); // checks the 1st radio button
setTimeout(function() {
    checkRadio(0, checked=false);
}, 3000); // unchecks the 1st radio button 3 seconds later
console.log(getCheckedRadio());
setTimeout(function() {console.log(getCheckedRadio());}, 10000);

<div data-test-automation-id="roleRadio4312028" class="form-element form-group">
  <div class="form-control__container outlined">
    <div class="radio">
      <label title="">
                <input name="roleId" variant="1" type="radio" data-test-automation-id="input" value="4312028">
                <span data-test-automation-id="label" class="">Radio Button 1</span>
            </label>
    </div>
  </div>
</div>
<div data-test-automation-id="roleRadio4312028" class="form-element form-group">
  <div class="form-control__container outlined">
    <div class="radio">
      <label title="">
                <input name="roleId" variant="1" type="radio" data-test-automation-id="input" value="4312028">
                <span data-test-automation-id="label" class="">Radio Button 2</span></label>
    </div>
  </div>
</div>

I really liked this answer. I am trying to find a way to reverse engineer the code where I get all the span elements and find the Text. For instance, if the user wanted to select "Radio Button 2", then how do I determine the index of the radio button? — Fast Chip, Mar 17 '21 at 18:47

score 0 · Answer 2 · answered Mar 17 '21 at 17:47

// select all radio buttons with name="roleId"
var els = document.querySelectorAll('input[type="radio"][name="roleId"]')

// select radio button, of name="roleId", with value="4312028"
// Note! since all radio buttons in example the HTML above have the same value
// the 1st is selected
var radio = document.querySelector('input[type="radio"][name="roleId"][value="4312028"]')

// mark "4312028" selected
radio.checked = true;

Javascript code to select the Radio button which is a nested element

2 Answers2