如何使用组中的单个项目获取 RadioNodeList？

Question

当我有这个表格

<form id="frm">
  <input type="radio" name="test" value="a">
</form>

调用frm.test.value = "b"获取输入节点并更改属性值。 另一方面在这种形式

<form id="frm">
  <input type="radio" name="test" value="a">
  <input type="radio" name="test" value="b">
</form>

调用frm.test.value = "b"获取 RadioNodeList object 并检查值为 "b" 的单选按钮（如果有）。

是否可以获得长度小于 2 的 RadioNodeList object 以安全地调用myobj.value = "b"来检查单选按钮（如果有这样的值）并且不更改其值属性？

我不寻找任何解决方法，例如检查 type ，只是为了安全地从 DOM 获取 RadioNodeList 。

Answer 1

如果“组”中只有一个单选按钮，则不会返回RadioNodeList 。 它是一个包含radio类型的<inputs>的NodeList的接口。

注意：您将无法在RadioNodeList中手动封装单个<input type="radio"> ，因为它不可实例化。 您将需要添加一个检查，如下所述，以安全地设置单个无线电的值。

为了“安全地”检查单选按钮的值，您需要检查它是RadioNodeList还是<input type="checkbox">元素。 如果它是RadioNodeList ，只需尝试设置该值。 但如果是单个元素，则需要比较输入值，然后将checked设置为true 。

 const isRadio = (input) => input && input.tagName === 'INPUT' && input.type === 'radio'; const setRadioValue = (radio, value) => { if (radio instanceof RadioNodeList) { radio.value = value; // Attempt to find a valid value } else if (isRadio(radio) && radio.value === value) { radio.checked = true; } }; // Will not change value setRadioValue(document.forms['frm-fail-1'].elements.test, 'c'); setRadioValue(document.forms['frm-fail-2'].elements.test, 'b'); // Will change value setRadioValue(document.forms['frm-pass-1'].elements.test, 'b'); setRadioValue(document.forms['frm-pass-2'].elements.test, 'a');

 * { margin: 0; padding: 0; } *, *:before, *:after { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: grid; grid-template-columns: repeat(2, 1fr); } body > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5em; } form { display: flex; border: thin dashed red; padding: 0.25em; gap: 0.25em; }

 <div> <h2>Fail</h2> <form id="frm-fail-1"> <input type="radio" name="test" value="a"> <input type="radio" name="test" value="b"> </form> <form id="frm-fail-2"> <input type="radio" name="test" value="a"> </form> </div> <div> <h2>Pass</h2> <form id="frm-pass-1"> <input type="radio" name="test" value="a"> <input type="radio" name="test" value="b"> </form> <form id="frm-pass-2"> <input type="radio" name="test" value="a"> </form> </div>