两组不同的单选按钮具有独立的行为

时间:2015-11-28 15:01:52

标签: css html5 radio-button

我有两个不同的部分,包含两个具有不同值和ID的单选按钮。问题是我一次只能检查一个按钮,但我需要这两组单选按钮独立工作,即在每组单选按钮中都可以检查一个按钮。 这是HTML:

<section class="radio_holder_1">
    <div class="radio">
        <input id="share_this" type="radio" name="option_type" value="share_this" checked>
        <label class="hmc_radiolabel" for="share_this">Share Picture</label>
        <input id="use_4_now" type="radio" name="option_type" value="use_4_now">
        <label class="hmc_radiolabel" for="use_4_now">Instant Use</label>
    </div>
</section>
    <hr>
<section class="radio_holder_2">
    <div class="radio_2">
       <input id="free" type="radio" name="option_type" value="free" checked>
       <label class="hmc_radiolabel" for="free">FREE</label>
       <input id="premium" type="radio" name="option_type" value="premium">
       <label class="hmc_radiolabel" for="premium">VIP</label>
    </div>
</section>

1 个答案:

答案 0 :(得分:-1)

问题是你的名字。为第二个选择使用不同的名称,它应该有效。

<section class="radio_holder_1">
<div class="radio">
<input id="share_this" type="radio" name="option_type" value="share_this" checked>
<label class="hmc_radiolabel" for="share_this">Share Picture</label>
<input id="use_4_now" type="radio" name="option_type" value="use_4_now">
<label class="hmc_radiolabel" for="use_4_now">Instant Use</label>
</div>
</section>
<hr>
<section class="radio_holder_2">
<div class="radio_2">
<input id="free" type="radio" name="option_type2" value="free" checked>
<label class="hmc_radiolabel" for="free">FREE</label>
<input id="premium" type="radio" name="option_type2" value="premium">
<label class="hmc_radiolabel" for="premium">VIP</label>
</div>
</section>