选择Radio按钮的Javascript代码是一个嵌套元素

Question

我在应用程序上有一些单选按钮，我想编写一个JavaScript函数来选择合适的单选按钮。当我检查页面后面的代码时，我看到了很多嵌套的元素，其中每个单选按钮都是一个div类，每个div都包含Label。例如：

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

如何编写javascript函数来有效地选择我想要的单选按钮？我想在控制台中运行此功能，以确保选择了正确的单选按钮。

我想到的javascript函数是：

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

提前感谢

Answer 1

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>

Answer 2

// 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;