【发布时间】：2021-01-06 13:45:53
【问题描述】：
我有一个输入表单，它使用按单选按钮组排列的单选按钮。我的问题是：“我可以拥有一个只有一个单选按钮的单选按钮组，并且它仍然可以用作单选按钮组吗？”
我知道这听起来很傻。如果只有一个按钮，为什么要使用单选按钮组？但我并没有为难或编造一个理论案例。在我的应用程序代码中，单选按钮组是通过 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 有一个长度属性，HTMLInputElement 没有。更根本的是，类型仍然是单选，那么为什么不仍然是一个带有一个节点的单选按钮组呢？我知道我可以通过查看属性并从那里作为解决方法来确定哪种对象类型。但是，我希望它保持为RadioNodeList，即使只有一个单选按钮。这可能吗？
[收到评论后添加]隐藏或禁用按钮将不起作用，因为类别（例如，种族组）可以组合成“集合”。例如，“白色”可以与“其他”组合以形成新的“白色/其他”集合。每次用户执行一个动作时，程序都需要用当前的类别和集合生成一个新的单选按钮组。现在，可以隐藏一个虚拟按钮，以欺骗程序始终认为 GT 1 按钮。虚拟隐藏按钮确实有效，我在获得评论后添加到示例中，看起来很笨拙，但这是一种解决方法，可能与测试对象类型大致相同。
https://www.w3.org/TR/html52/sec-forms.html#radio-button-state-typeradio 表示“文档不得包含单选按钮组仅包含该元素的输入元素。”我不确定这到底是什么意思，但也许它是说组中不能只有一个单选按钮。如果是这样，他们肯定有一种晦涩的说法。 ？？？有人知道组中有一个单选按钮的情况吗？
我的最佳猜测是，当只有一个单选按钮时，不再考虑一个单选按钮组。有人可以验证这一点，提供建议/推理，或纠正我可能感到困惑的任何事情吗？谢谢
【问题讨论】：
-
你能隐藏不需要的单选按钮吗？即，为按钮及其标签设置 style.display="none" - 或者，也许将它们包装在一个 div 中并隐藏它，以便您也包含 br 标记。
-
这是一个合理的建议，谢谢，但 hide 不起作用，因为类别（例如，种族组）可以组合成“集合”。例如，“白色”可以与“其他”组合以形成新的“白色/其他”集合。每次用户执行操作时，程序都会生成新的单选按钮组，并使用 javascript 数组和隐藏变量（用于发送到 cgi 服务器）进行跟踪。这意味着我建议的其他替代方法（禁用已删除类别的单选按钮）不起作用，因此我编辑了我的帖子。
-
那么，您是否在考虑级联选择列表的单选按钮版本？即，如果我从列表 A 中选择一个值，则列表 B 将更改为仅显示与列表 A 中的选择相关的项目。
-
没有级联选择列表。取而代之的是一个单一的列表，例如“种族集”。用户操作包括删除集合、添加集合、将集合组合成新集合。基本上可以任意组合。用户操作后，AJAX 从服务器获取数据，客户端 javascript 更新单选按钮，使用 innerHTML 进入标签。一切正常，我只是从您的初始代码似乎已更改。无论如何，由于没有按钮或输入框，用户如何从任何地方添加/删除任何内容？
标签： javascript html dom radio-button radio-group