修改

Question

我想，当单选按钮处于选中状态时，div将采用不同的背景颜色。在检查无线电时，看起来好像选择了整个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>，并使用选择器从其中绘制bg颜色：:checked + label

它涉及：position:relative + absolute，coordonates和z-index，如果列没有背景，则有效，如果有，所有孩子都需要相对定位和正z -index，在这种情况下，标签不需要z-index。

在代码段下方进行演示，点击单选按钮添加bg颜色：）

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

Answer 2

你可以使用它，我还没有测试过，但想法是当你检查任何单选按钮然后将所有容器的颜色更改为非选定的背景颜色，然后只需更改将单选按钮包含在所选背景颜色中。

 $('input:radio').change(
          var selectedElement=$(this);
          $('.pricing-option').each(function(){
            $(this).css('background','yournonselectedcolor');
          });
          selectedElement.closest('.pricing-option').css('background','yourcolorhere');
        );

Answer 3

如果我理解错了，请纠正我。您在单击子单选按钮时尝试更改tr的颜色。 div的用途是什么？ Slighlty修改了JG Estevez的js并且它起作用了。

$('input:radio').change(function(){
  var selectedElement=$(this);
  $('tr').each(function(){
    $(this).css('background','#fff');
  });
  selectedElement.closest('tr').css('background','coral');
});

First row highlighted

检查radion按钮时如何为div添加背景颜色

3 个答案:

修改