Trending News Trending News -3 years ago 43
Javascript Question

How can I make multiple radio button groups with same name?

My code like this :

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


Demos like this :

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

I want to use the same name on both groups button like my code above. But the impact is that both radio button groups can only choose one. There are cases that make me have to use the same name.

How to make both groups button can be selected even though using the same name?

Answer Source

Bind your radio button groups in two forms that will allow you to select them independently. Fiddle : 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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download