javascript - 选中单选按钮时如何为div添加背景色

Question

我想，当单选按钮处于选中状态时，div 将采用不同的背景颜色。当选中 radio 时，看起来好像整个 div 都被选中了。

当选中 .pricing-option.one 内的单选按钮时，.pricing-option.one 将采用背景色。并在 .pricing-option.two 内部进行检查，.pricing-option.two 将采用背景色并与其余部分相同。

喜欢图片:

我不知道该怎么做，有人能帮我吗？

这是我的代码:

<div class="visible-xs mobile-pricing-table clearfix">
    <div class="col-xs-4 pricing-option one text-center">
        <div class="ticket-quantity">
            <h2>50</h2>
            <p>Lottery Tickets</p>
        </div>
        <div class="winning-chances">
            <h2>17%</h2>
            <p>Winning Chances</p>
        </div>
        <div class="price">
            <strike>€114.99</strike>
            <h2>€14.99</h2>
            <p>You save 100€</p>
        </div>
        <div class="offer-selection">
            <input type="radio" name="optionsRadios" id="optionsRadios4" value="option4">
            <label for="optionsRadios4"></label>
        </div>
    </div>

    <div class="col-xs-4 pricing-option two text-center">
        <div class="ticket-quantity">
            <h2>200</h2>
            <p>Lottery Tickets</p>
        </div>
        <div class="winning-chances">
            <h2>68%</h2>
            <p>Winning Chances</p>
        </div>
        <div class="price">
            <strike>€126.40</strike>
            <h2>€26.40</h2>
            <p>You save 100€</p>
        </div>
        <div class="offer-selection">
            <input type="radio" name="optionsRadios" id="optionsRadios5" value="option5">
            <label for="optionsRadios5"></label>
        </div>
    </div>

    <div class="col-xs-4 pricing-option three text-center">
        <div class="ticket-quantity">
            <h2>400</h2>
            <p>Lottery Tickets</p>
        </div>
        <div class="winning-chances">
            <h2>87%</h2>
            <p>Winning Chances</p>
        </div>
        <div class="price">
            <strike>€149.9</strike>
            <h2>€49.9</h2>
            <p>You save 100€</p>
        </div>
        <div class="offer-selection">
            <input type="radio" name="optionsRadios" id="optionsRadios6" value="option6">
            <label for="optionsRadios6"></label>
        </div>
    </div>
</div>

Answer 1

你可以使用空的 <label>在单选按钮后面并使用选择器从中绘制背景色::checked + label

它涉及:position:relative + absolute , 坐标和 z-index , 如果列没有背景，则工作，如果有，所有 child 也需要相对定位和正 z-index，在这种情况下，标签不需要 z-index。

下面的代码片段演示，单击单选按钮添加背景颜色:)

.pricing-option {
  position:relative;/* this tells absolute children where it stands */
  }
:checked + label {
  position:absolute;
  /* coordonates to reach each sides of the relative parent container */
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:lightblue;
  z-index:-1;/* put it underneath the container */
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="">
    <div class="col-xs-4 pricing-option one text-center">
        <div class="ticket-quantity">
            <h2>50</h2>
            <p>Lottery Tickets</p>
        </div>
        <div class="winning-chances">
            <h2>17%</h2>
            <p>Winning Chances</p>
        </div>
        <div class="price">
            <strike>€114.99</strike>
            <h2>€14.99</h2>
            <p>You save 100€</p>
        </div>
        <div class="offer-selection">
            <input type="radio" name="optionsRadios" id="optionsRadios4" value="option4">
            <label for="optionsRadios4"></label>
        </div>
    </div>

    <div class="col-xs-4 pricing-option two text-center">
        <div class="ticket-quantity">
            <h2>200</h2>
            <p>Lottery Tickets</p>
        </div>
        <div class="winning-chances">
            <h2>68%</h2>
            <p>Winning Chances</p>
        </div>
        <div class="price">
            <strike>€126.40</strike>
            <h2>€26.40</h2>
            <p>You save 100€</p>
        </div>
        <div class="offer-selection">
            <input type="radio" name="optionsRadios" id="optionsRadios5" value="option5">
            <label for="optionsRadios5"></label>
        </div>
    </div>

    <div class="col-xs-4 pricing-option three text-center">
        <div class="ticket-quantity">
            <h2>400</h2>
            <p>Lottery Tickets</p>
        </div>
        <div class="winning-chances">
            <h2>87%</h2>
            <p>Winning Chances</p>
        </div>
        <div class="price">
            <strike>€149.9</strike>
            <h2>€49.9</h2>
            <p>You save 100€</p>
        </div>
        <div class="offer-selection">
            <input type="radio" name="optionsRadios" id="optionsRadios6" value="option6">
            <label for="optionsRadios6"></label>
        </div>
    </div>
</div>

---

编辑

自 <label>似乎已经用于其他目的，让我们添加一个空标签以仍然避免使用 javascript:

.pricing-option {
  position:relative;/* this tells absolute children where it stands */
  }
:checked ~ .bg {
  position:absolute;
  /* coordonates to reach each sides of the relative parent container */
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:lightblue;
  z-index:-1;/* put it underneath the container */
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="">
    <div class="col-xs-4 pricing-option one text-center">
        <div class="ticket-quantity">
            <h2>50</h2>
            <p>Lottery Tickets</p>
        </div>
        <div class="winning-chances">
            <h2>17%</h2>
            <p>Winning Chances</p>
        </div>
        <div class="price">
            <strike>€114.99</strike>
            <h2>€14.99</h2>
            <p>You save 100€</p>
        </div>
        <div class="offer-selection">
            <input type="radio" name="optionsRadios" id="optionsRadios4" value="option4">
            <label for="optionsRadios4"></label>
          <i class="bg"></i>
        </div>
    </div>

    <div class="col-xs-4 pricing-option two text-center">
        <div class="ticket-quantity">
            <h2>200</h2>
            <p>Lottery Tickets</p>
        </div>
        <div class="winning-chances">
            <h2>68%</h2>
            <p>Winning Chances</p>
        </div>
        <div class="price">
            <strike>€126.40</strike>
            <h2>€26.40</h2>
            <p>You save 100€</p>
        </div>
        <div class="offer-selection">
            <input type="radio" name="optionsRadios" id="optionsRadios5" value="option5">
            <label for="optionsRadios5"></label>
          <i class="bg"></i>
        </div>
    </div>

    <div class="col-xs-4 pricing-option three text-center">
        <div class="ticket-quantity">
            <h2>400</h2>
            <p>Lottery Tickets</p>
        </div>
        <div class="winning-chances">
            <h2>87%</h2>
            <p>Winning Chances</p>
        </div>
        <div class="price">
            <strike>€149.9</strike>
            <h2>€49.9</h2>
            <p>You save 100€</p>
        </div>
        <div class="offer-selection">
            <input type="radio" name="optionsRadios" id="optionsRadios6" value="option6">
            <label for="optionsRadios6"></label>
          <i class="bg"></i>
        </div>
    </div>
</div>