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

我的代码如下：

<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>

英格兰

切尔西


亩


兵工厂



西班牙

马德里


巴塞罗那


马竞

演示如下：

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

---

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

将单选按钮组绑定为两种形式，这样您就可以独立选择它们。小提琴：

英格兰

切尔西


亩


兵工厂



西班牙

马德里


巴塞罗那


马竞

在单独的

表单中使用单选按钮组。一种表单中只能存在一个
名称
组




英格兰

切尔西


亩


兵工厂



西班牙

马德里


巴塞罗那


马竞


您可以使用不同的表单标签。可能会重复使用不同的表单标签。没有其他方法吗？因为当添加表单时，它使我的外观变得untidy@AdhershMNair，我看到了链接，有一个答案使用了这个
。在我的html中，我使用以下内容：
。但是为什么它不起作用呢？难道没有别的办法吗？因为当添加表单时，它会使我的外观变得不整洁添加表单标签不会改变您的外观可能是您有任何未关闭的标签它会使我的外观不整洁。我在JSFIDLE中显示的，它不是我的原始视图。我没有展示我的真实观点。这只是我的简单观点。既然如此，我现在帮不了你，因为我正忙着做其他的工作。没问题。谢谢你的帮助没有别的办法吗？因为当添加表单时，它会使我的外观变得不整洁。如果添加
标记会扭曲您的UI，您可以相应地更改CSS。您可能已经应用了CSS并使用了标签，从而扭曲了嵌套代码的层次结构。好的。谢谢
<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>