How do I access the RadioNodeList interface on a Fieldset

Question

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

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

Your codepen link is broken. Anyway, there is a `HTMLFieldsetElement.elements` readonly property that returns a list of all controls in the `
` element, similar to `HTMLFormElement.elements`. That's probably what you're looking for. — Terry, Sep 12 '22 at 11:03
HTMLFieldsetElement.elements returns a HTMLCollection object and setting value = "red" will just add the property to the collection. I need access to the underlying RadioNodeList object for the value property to work on the radio buttons as per the documentation — noontz, Sep 12 '22 at 11:23
There is an inconsistency with regard to access of radio buttons in HTML. Does this answer your question? [How to get value of selected radio button?](https://stackoverflow.com/questions/15839169/how-to-get-value-of-selected-radio-button) — Armen Michaeli, Sep 12 '22 at 11:27
Nope, but thx.. I wan't access to the RadioNodeList for consistent, clean code. I like the form example from MDN, and currently I'll just stick with a form, but I would prefer a Fieldset — noontz, Sep 12 '22 at 11:31
This feels like an XY problem. What are you trying to achieve here? — Terry, Sep 12 '22 at 11:41
I guess you're looking for something like this? https://stackoverflow.com/questions/8941984/how-to-polyfill-radionodelist — aghashamim, Sep 12 '22 at 12:50

score 0 · Answer 1 · answered Sep 29 '22 at 00:37

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

Your code throws this exception: Uncaught TypeError: Cannot read properties of null (reading 'form') https://codepen.io/steffendyhr-nielsen/pen/bGMeOMW — noontz, Sep 29 '22 at 07:51

How do I access the RadioNodeList interface on a Fieldset

1 Answers1