如何创建多个具有相同名称的单选按钮组？答案

【问题标题】：How can I make multiple radio button groups with same name?如何创建多个具有相同名称的单选按钮组？
【发布时间】：2017-06-13 14:05:40
【问题描述】：

我的代码是这样的：

<div class="col-md-4">
    <ul class="list-unstyled">
        <li><strong>England</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Chelsea
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Mu
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Arsenal
                </label>
            </div>
        </li>
    </ul>
</div>
<div class="col-md-4">
    <ul class="list-unstyled">
        <li><strong>Spain</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Madrid
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Barcelona
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Atletico
                </label>
            </div>
        </li>
    </ul>
</div>

这样的演示：

https://jsfiddle.net/oscar11/m7by6zcw/1/

我想在两个组按钮上使用相同的名称，就像我上面的代码一样。但影响是两个单选按钮组只能选择一个。有些情况让我不得不使用相同的名字。

如何使两个组按钮都可以选择，即使使用相同的名称？

【问题讨论】：

您可以使用不同的表单标签。
Multiple Radio Button Groups With Same Name的可能重复
把它们放在不同的表单标签中
没有别的办法了吗？因为在添加表单的时候，让我的外观变得不整洁
@AdhershMNair，我看到了链接，有一个答案使用了这个<div class="col-md-6">。在我的 html 中，我使用这个：<div class="col-md-4">。但为什么它不起作用？

标签： javascript jquery html radio-button

【解决方案1】：

像这样在单独的form 标签中使用您的单选按钮组。一种形式只能有一个name 组。

<div class="col-md-4">
  <form>
    <ul class="list-unstyled">
        <li><strong>England</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Chelsea
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Mu
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Arsenal
                </label>
            </div>
        </li>
    </ul>
  </form>
</div>
<div class="col-md-4">
  <form>
    <ul class="list-unstyled">
        <li><strong>Spain</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Madrid
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Barcelona
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Atletico
                </label>
            </div>
        </li>
    </ul>
  </form>
</div>

【讨论】：

没有别的办法了吗？因为在添加表单的时候，让我的外观变得不整洁
如果添加<form> 标签会扭曲您的 UI，您可以相应地更改您的 CSS。您可能应用了 CSS 并使用
标记扭曲了嵌套代码的层次结构。
好的。非常感谢

【解决方案2】：

以两种形式绑定您的单选按钮组，以便您可以独立选择它们。小提琴：https://jsfiddle.net/m7by6zcw/5/

<div class="col-md-4">
<form>
    <ul class="list-unstyled">
        <li><strong>England</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Chelsea
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Mu
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Arsenal
                </label>
            </div>
        </li>
    </ul>
    </form>
</div>
<div class="col-md-4">
<form>


    <ul class="list-unstyled">
        <li><strong>Spain</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Madrid
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Barcelona
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="test"> Atletico
                </label>
            </div>
        </li>
    </ul>
    </form>
</div>

【讨论】：

没有别的办法了吗？因为在添加表单的时候，让我的外观变得不整洁
添加表单标签不会改变你的外观可能是你有任何未闭合的标签
这让我的外表不整洁。我在 jsfiddle 中展示的，这不是我原来的观点。我没有展示我的真实观点。这只是我的简单看法
那我现在忙于其他工作，帮不了你
好的。没问题。感谢您的帮助