如何制作多个具有相同名称的单选按钮组？

Question

我的代码是这样的：

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

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

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

Answer 1

将您的单选按钮组绑定为两种形式，以便您可以单独选择它们。小提琴：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>

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;