"无线电直列"类不要让多组单选按钮工作

时间:2016-10-09 12:51:26

标签: html css html5 css3 twitter-bootstrap-3

在我的代码中,我有两行内联单选按钮,每当我单击一个单选按钮时,两行被视为同一组的一部分

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

<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&#34; ad_size&#34;和&#34; ad_pos&#34;所以在ad_size中选择一个单选按钮会更改另一个div中的单选按钮。

任何人都可以指出我的错误

1 个答案:

答案 0 :(得分:3)

输入名称应该不同;请更改广告位中所有广播的名称,如下面的代码

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