html - "radio-inline"类不允许多组单选按钮工作

Question

在我的代码中，我有两行内联单选按钮，每当我单击一个单选按钮时，这两行就好像它们属于同一组一样

所以每一行都无法有自己的选择这里是我的代码:

<p class="text-danger" style="font-size: 20px;margin: 20px 0 10px 0;">Select Your Ad size :</p>
<div class="row">
    <div class="col-xs-12" id="ad_size">

        <span class="disp_ad_size disp_active">
            <label class="radio-inline">
                <input type="radio" onClick="ad_size(this)" name="inlineRadioOptions" id="size_ad_1" value="size_ad_1" checked><span style="font-size: 15px;font-weight: bold;">4cm x 4cm</span> 
            </label>
        </span>
        <span class="disp_ad_size">
            <label class="radio-inline">
                <input type="radio" onClick="ad_size(this)" name="inlineRadioOptions" id="size_ad_2" value="size_ad_2"><span style="font-size: 15px;font-weight: bold;">8cm x 6cm</span>  
            </label>
        </span>
        <span class="disp_ad_size">
            <label class="radio-inline">
                <input type="radio" onClick="ad_size(this)" name="inlineRadioOptions" id="size_ad_3" value="size_ad_3"><span style="font-size: 15px;font-weight: bold;">33cm x 25cm</span>  
            </label>
        </span>
        <span class="disp_ad_size">
            <label class="radio-inline">
                <input type="radio" onClick="ad_size(this)" name="inlineRadioOptions" id="size_ad_4" value="size_ad_4"><span style="font-size: 15px;font-weight: bold;">33cm x 52cm</span>  
            </label>
        </span>
    </div>
</div>
<p class="text-danger" style="font-size: 20px;margin: 20px 0 10px 0;">Select Your Ad Position :</p>
<div class="row">
    <div class="col-xs-12" id="ad_pos">

        <span class="disp_ad_pos disp_active">
            <label class="radio-inline">
                <input type="radio" onClick="ad_pos(this)" name="inlineRadioOptions" id="size_pos_any" value="size_ad_1" checked><span style="font-size: 15px;font-weight: bold;">Any page</span> 
            </label>
        </span>
        <span class="disp_ad_pos">
            <label class="radio-inline">
                <input type="radio" onClick="ad_pos(this)" name="inlineRadioOptions" id="size_pos_5" value="size_ad_2"><span style="font-size: 15px;font-weight: bold;">3rd page</span>  
            </label>
        </span>
        <span class="disp_ad_pos">
            <label class="radio-inline">
                <input type="radio" onClick="ad_pos(this)" name="inlineRadioOptions" id="size_pos_3" value="size_ad_3"><span style="font-size: 15px;font-weight: bold;">5th page</span>  
            </label>
        </span>
        <span class="disp_ad_pos">
            <label class="radio-inline">
                <input type="radio" onClick="ad_pos(this)" name="inlineRadioOptions" id="size_pos_last" value="size_ad_4"><span style="font-size: 15px;font-weight: bold;">Last page</span>  
            </label>
        </span>
        <span class="disp_ad_pos" style="margin-right:0px">
            <label class="radio-inline">
                <input type="radio" onClick="ad_pos(this)" name="inlineRadioOptions" id="size_pos_front" value="size_ad_4"><span style="font-size: 15px;font-weight: bold;">Front Page</span>  
            </label>
        </span>
    </div>
</div>

所以我有两个 div“ad_size”和“ad_pos”，所以在 ad_size 中选择一个单选按钮会更改另一个 div 中的单选按钮。

谁能指出我的错误

Answer 1

输入的名称应该不同；请更改广告位置中所有 radio 的名称，如下代码

<span class="disp_ad_pos disp_active">
        <label class="radio-inline">
            <input type="radio" onClick="ad_pos(this)" name="inlineRadioOptionsPage" id="size_pos_any" value="size_ad_1" checked><span style="font-size: 15px;font-weight: bold;">Any page</span> 
        </label>
    </span>
    <span class="disp_ad_pos">
        <label class="radio-inline">
            <input type="radio" onClick="ad_pos(this)" name="inlineRadioOptionsPage" id="size_pos_5" value="size_ad_2"><span style="font-size: 15px;font-weight: bold;">3rd page</span>  
        </label>
    </span>
    <span class="disp_ad_pos">
        <label class="radio-inline">
            <input type="radio" onClick="ad_pos(this)" name="inlineRadioOptionsPage" id="size_pos_3" value="size_ad_3"><span style="font-size: 15px;font-weight: bold;">5th page</span>  
        </label>
    </span>
    <span class="disp_ad_pos">
        <label class="radio-inline">
            <input type="radio" onClick="ad_pos(this)" name="inlineRadioOptionsPage" id="size_pos_last" value="size_ad_4"><span style="font-size: 15px;font-weight: bold;">Last page</span>  
        </label>
    </span>
    <span class="disp_ad_pos" style="margin-right:0px">
        <label class="radio-inline">
            <input type="radio" onClick="ad_pos(this)" name="inlineRadioOptionsPage" id="size_pos_front" value="size_ad_4"><span style="font-size: 15px;font-weight: bold;">Front Page</span>  
        </label>
    </span>