问题描述
我有一个使用单选按钮组中的单选按钮的输入表单。我的问题是：“我可以有一个只有一个单选按钮的单选按钮组，并且它仍然可以用作单选按钮组吗？”
我知道这听起来很愚蠢。如果只有一个按钮，为什么要使用单选按钮组？但是我并不困难，也不构成理论上的案例。在我的应用程序代码中，单选按钮组是通过javascript动态生成的，并放置在滚动div（未显示）中。假设单选按钮组用于比赛，并且有四个按钮：白色，黑色，西班牙裔和其他。例如，用户删除三个类别，并留给西班牙裔。可以说我确实有必要（有时）在组中只有一个单选按钮。
请不要提出易于理解的建议来使用选择框或复选框。我特别需要使用单选按钮来使移动设备上的外观和功能更好（对于此数据分析应用程序而言）。
我相信以下源代码可以说明问题。在情况1中，DOM认为单选按钮组为HTMLInputElement。在情况2中，它被认为是RadioNodeList（普通单选按钮组）。情况3使用虚拟隐藏按钮作为可能的解决方法，DOM将单个可见按钮视为RadioNodeList对象。
<!DOCTYPE html>
<html>
<body>
<script>
function showInfo (case_num) {
var groupName = "group" + case_num;
var objectvar = myForm.elements.namedItem (groupName);
var str = '';
str += "Case number: " + case_num;
str += "\nobjectvar = " + objectvar;
str += "\nobjectvar.value = " + objectvar.value;
str += "\nobjectvar.name = " + objectvar.name;
str += "\nobjectvar.length = " + objectvar.length;
str += "\nobjectvar.checked = " + objectvar.checked;
str += "\nobjectvar[0] = " + objectvar[0];
str += "\nobjectvar[1] = " + objectvar[1];
if (objectvar[0] != undefined) {
str += "\nobjectvar[0].value = " + objectvar[0].value;
str += "\nobjectvar[0].name = " + objectvar[0].name;
str += "\nobjectvar[0].checked = " + objectvar[0].checked;
}
if (objectvar[1] != undefined) {
str += "\nobjectvar[1].value = " + objectvar[1].value;
str += "\nobjectvar[1].name = " + objectvar[1].name;
str += "\nobjectvar[1].checked = " + objectvar[1].checked;
}
alert (str);
}
</script>
<form name="myForm" action="">
Case 1: Single radio button in "group1" group:
<br>
<input type="radio" id="m1" name="group1" value="m1" onchange="showInfo (1);">
<label for="m1">M</label>
<br>
<br>
Case 2: Two radio buttons in "group2" group:
<br>
<input type="radio" id="m2" name="group2" value="m2" onchange="showInfo (2);">
<label for="m2">M</label>
<br>
<input type="radio" id="f2" name="group2" value="f2" onchange="showInfo (2);">
<label for="f2">F</label>
<br>
<br>
Case 3: Single visible radio button in "group3" group,with hidden button:
<br>
<input type="radio" id="m3" name="group3" value="m3" onchange="showInfo (3);">
<label for="m3">M</label>
<input style="display: none;" type="radio" id="f3" name="group3" value="f3" onchange="showInfo (3);">
<label style="display: none;" for="f3">F</label>
</form>
</body>
</html>
由于DOM切换了对象类型，因此使事情变得复杂。例如，RadioNodeList具有length属性，HTMLInputElement没有。从根本上讲，该类型仍然是单选按钮，那么为什么还不选择一个节点的单选按钮组呢？我知道我可以通过查看属性并从那里作为解决方法来找出哪种对象类型。但是，我宁愿即使只是一个单选按钮，它也仍然是RadioNodeList。有可能吗？
[获得评论后添加]隐藏或禁用按钮将不起作用，因为类别（例如种族组）可以组合为“集合”。例如，“白色”可以与“其他”组合以形成新的“白色/其他”集合。每次用户执行操作时，程序都需要使用当前类别和设置来生成一个新的单选按钮组。现在，可以隐藏一个虚拟按钮，以使程序始终认为GT 1按钮是愚蠢的。在获得评论后，我在示例中添加了一个虚拟的隐藏按钮，它看起来很笨拙，但这是一种解决方法，也许与测试对象类型相同。
https://www.w3.org/TR/html52/sec-forms.html#radio-button-state-typeradio说：“文档不能包含输入元素，其单选按钮组仅包含该元素。”我不确定这到底是什么意思，但也许是说不能在组中只有一个单选按钮。如果是这样，他们肯定会以一种晦涩的方式表达出来。 ?有人知道分组中只有一个单选按钮的情况吗？
我的最佳猜测是，当只有一个单选按钮时，不再考虑单选按钮组。有人可以验证这一点，提供建议/推理或纠正我可能感到困惑的任何事情吗？谢谢
解决方法
也许没有人理解这个问题。无论如何，这是我最佳理解的答案。
就用户看到的内容而言，答案是“是的，我可以有一个仅带有一个按钮的单选按钮组，并且仍将其用作单选按钮组”。您可以在示例中看到：只有一个单选按钮。它开始未选中。用户可以检查它。一旦选中，就不能取消选中。没什么大不了的。但是就在那里。
就程序员的看法而言，答案是“不，单个单选按钮不能用作单选按钮组，它是一个不同的对象，但是可以处理”。如示例中所示，只有一个按钮的单选按钮组是HTMLInputElement对象。通过多个按钮，它是RadioNodeList对象。
为什么专家做出这个决定（如果只有一个按钮，就HTMLInputElement超出了我的范围。对我来说，就像我的数学老师说我不能有一个包含单个元素的集合。但是也许我错过了一些东西。无论如何，这些都是事实。
RadioNodeList和HTMLInputElement（两种情况）与程序员有何相似之处或不同之处？请记住，界面可能会更改，因此以多个单选按钮开头的内容将以一个结束。如果代码没有考虑到这一点，由于对象不同，它将失败。
两个对象都具有value属性-无论一个或多个单选框，value属性都会给出字符串，指示已选中哪个框。无论哪种情况，它都是复选框的值；如果未选中任何复选框，则为空字符串。因此，我相信这两种情况下的效果都相同。
只有RadioNodeList具有length属性。因此，如果不测试，代码最终将崩溃。如果if (my_object.length === undefined)个对象，则测试RadioNodeList的结果为false，HTMLInputElement对象的结果为true（在这种情况下，长度基本上为1）。
仅HTMLInputElement具有name属性，但是RadioNodeList的各个节点也具有name属性，并且共享单选按钮组所需的相同名称。无论哪种情况，提交表单时，我都认为它的作用相同，但是我没有直接对其进行测试。
只有RadioNodeList拥有您可以使用NodeList.forEach()语法或for loop和NodeList[ndx]语法进行迭代的节点集合。尝试使用HTMLInputElement执行此操作，代码将崩溃。如果存在length属性，则可以进行迭代，否则只需一个HTMLInputElement元素即可。
我认为理解差异的最好方法是查看示例代码的输出，我对其进行了进一步编辑以添加更多详细信息。如果您愿意，请添加任何其他评论，但是我什么都没期待。谢谢