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

I want, when radio button is in the checked state, a div will take a different background color. It should seem as if the whole div is selected when the radio is checked.

我想,当单选按钮处于选中状态时,div将采用不同的背景颜色。在检查无线电时,看起来好像选择了整个div。

When radio button, inside the .pricing-option.one, is checked, .pricing-option.one will take background color. And checked when inside the .pricing-option.two, .pricing-option.two will take background color and same as the rest.

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

Like the image:

像图像:

I don't understand how to do this, can anyone help me?

我不明白怎么做,任何人都可以帮助我吗?

This is my code:

这是我的代码:

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

3 个解决方案

#1

Please correct me if I understood this wrong. You're trying to change the color of a tr upon clicking a child radio button. What are the div's for? Slighlty modified the js from JG Estevez and it worked.

如果我理解错了,请纠正我。您正在尝试在单击子单选按钮时更改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

第一行突出显示

#2

you could use the empty <label> right behind the radio button and draw a bg-color from it with selector : :checked + label

您可以使用单选按钮后面的空并使用selector :: checked + label从中绘制bg颜色

it involves : position:relative + absolute, coordonates and z-index, and works if column has no background, if it does, all children will require a relative positionning too and a positive z-index, in this case no z-index are required for the label.

它涉及:position:relative + absolute,coordonates和z-index,如果列没有背景,则工作,如果是,所有子节点也需要相对位置和正z-index,在这种情况下没有z-index是标签要求。

Demo below in snippet, click the radio button to add a bg-color :)

在片组下面演示,单击单选按钮添加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>

---

edit

since <label> seems already used for another purpose, lets add an empty tag to still avoid javascript:

由于似乎已经用于其他目的,让我们添加一个空标记仍然可以避免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>

#3

You can use this, I haven' tested it but the idea is that when you check any radio button then change the color of all the containers to the non selected background color, then just change the containter of the radio button to the selected background color.

您可以使用此,我的天堂”测试,但这个想法是,当你选中任何单选按钮,然后改变所有的容器,以非选择的背景色的颜色,那么就改变单选按钮的containter到所选择的背景色。

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