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

标签 html css 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“ad_size”和“ad_pos”,所以在 ad_size 中选择一个单选按钮会更改另一个 div 中的单选按钮。

谁能指出我的错误

最佳答案

输入的名称应该不同;请更改广告位置中所有 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>

关于html - "radio-inline"类不允许多组单选按钮工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39943825/

相关文章:

javascript - 使用复选框从数据库获取行 ID

iphone - iOS 有哪些字体,是否支持@font-face?

css - 即使 @grid-gutter-width 为 0,Bootstrap 3 列也不接触

css - twitter bootstrap 3 选项卡 View 淡入淡出无法正常工作

html - 为什么我的 bootstrap inputs 比他们的 parent div 大

javascript - div占满空间

javascript - 在数据表上设置自动焦点 - $.focus() 不进行更改

html - 使用导航栏 Bootstrap 全屏谷歌地图

javascript - 给活跃的 li 元素一个不同的背景

css - SASS继承——省略基类