How do I access the RadioNodeList interface on a Fieldset

Question

According to the documentation

"The RadioNodeList interface represents a collection of radio elements in a form or a fieldset element."

But in the example on the value property a form element is used.

I have not been able to figure out how to access the interface on a fieldset.

Attempt on codepen

HTML:

<form id="radioNodeList_form">
  <label><input type="radio" name="color" value="blue">Blue</label>
  <label><input type="radio" name="color" value="red">Red</label>
</form>


<fieldset id="radioNodeList_fieldset">
  <label><input type="radio" name="color_" value="blue">Blue</label>
  <label><input type="radio" name="color_" value="red">Red</label>
</fieldset>

JS:

const form = document.getElementById('radioNodeList_form');

let radios = form.elements['color'];

console.log(radios);

radios.value = 'red';


const fieldset = document.getElementById('radioNodeList_fieldset');

radios = fieldset.querySelectorAll('input');

console.log(radios);

Help would be appreciated. Thx ;)

Answer 1

I achieved getting the RadioNodeList by accessing the fieldset form first.

const fieldset = document.querySelector('fieldset [id=radioNodeList_fieldset]')
const form = fieldset.form;
const nodeList = form.elements['color_'];

then you can get value from the nodeList

nodeList.value

const nodeList = document
  .querySelector('fieldset [id=radioNodeList_fieldset]')
  .form.elements['color_'];
const value = nodeList.value;

I haven't find a better way to access a fieldset radio node list