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/

相关文章:

css - 导致 SSL 问题的字体

javascript - 无法在 Bootstrap 模式中显示 OpenLayers 3 map

html - 需要 CSS float 帮助

html - 将 div 拉伸(stretch)到浏览器的一侧

html - Bootstrap 响应式导航栏折叠错位

javascript - D3.JS 条件工具提示 html

javascript - 单击子链接时如何停止垂直菜单的 Accordion 。?

html - 元素未填充到容器中?

html - 绝对内联元素的位置不同

jquery - 手动滚动添加类在这里不起作用