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

Question

我有两个不同的部分，由两个具有不同值和 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>

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