hitesh1124 hitesh1124 - 1 month ago 6
CSS Question

"radio-inline" class not letting multiple group of radio buttons to work

In my code i have two rows of inline radio buttons , whenever i click a radio button the two rows are treated as if they are part of the same group

So the each row is unable to have it's own selection here is my code :

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


so i have two divs "ad_size" and "ad_pos" so select a radio button in ad_size changes the radio selection in the other div.

can anybody point out my mistake

Answer

the input name should be different; please change all the radio's name in Ad Position, like below codes

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