将单选按钮与包含元素组合在一起？答案

【问题标题】：Grouping radio buttons together with a containing element?将单选按钮与包含元素组合在一起？
【发布时间】：2016-03-07 23:18:30
【问题描述】：

将单选按钮组合在一起的标准方法是为每个按钮分配一个name 属性，并将某个组中的每个按钮设置为相同的“组名”，如下所示：

<p>
    Group 1:<br>
    <input type="radio" name="group1" value="val1">
    <input type="radio" name="group1" value="val2">
</p>
<p>
    Group 2:<br>
    <input type="radio" name="group2" value="val3">
    <input type="radio" name="group2" value="val4">
</p>

但是，当您为网页开发一些可以在页面上多次使用的部分代码时，必须想出一个不同的“组名”是一件非常痛苦的事情。如果您可以将单选按钮与周围元素组合在一起会更好，如下所示：

<p>
    Group 1:<br>
    <radiogroup>
        <input type="radio" value="val1">
        <input type="radio" value="val2">
    </radiogroup>
</p>
<p>
    Group 2:<br>
    <radiogroup>
        <input type="radio" value="val3">
        <input type="radio" value="val4">
    </radiogroup>
</p>

这样的事情可能吗？否则，如果我的部分代码在一个页面上包含两次，则前 2 个 inputs 的 2 个实例将全部包含在同一组中，而后 2 个 inputs 的 2 个实例将全部包含在同一组。不过，我想要的是 4 组；每个部分包含 2 个组。

【问题讨论】：

如果元素具有相同的名称，您认为表单处理将如何工作？

标签： html radio-button radiobuttonlist radio-group

【解决方案1】：

似乎没有办法做到这一点。我最终做的是为每个部分生成一个新的 GUID，并将其附加到该部分中单选按钮的 name 属性。

【讨论】：

【解决方案2】：

我使用带有 ID 的 span 属性将单选按钮列表组合在一起。

【讨论】：