使用css选中单选按钮时，向div添加背景色

我有一个单选按钮，当选中该单选按钮时，我需要将样式添加到其父div。我只需要用css就可以了。在下面的html中，如果选中收音机，我需要为div“options”应用颜色

HTML

---

谁能帮我一下吗？对不起，现在还不能。你只能下树，不能上树。您需要创建要为单选按钮的同级或子级设置样式的元素。祖先选择器尚不存在：

---

需要使用CSS4中的父选择器，不幸的是，CSS4尚未可用。因此，在今天，使用纯css是不可能做到这一点的。

Javascript是您的答案

var payMethod=document.querySelector（“#payMethod1”）；
payMethod.onchange=函数（）{
警报（'单击'）
//获得span和div
如果（选中此项）{
var elements=document.querySelectorAll（'.option_radio，.options'）；
//循环元素&添加类
对于（var i=0；i

这不会像您尝试的那样起作用，因为这意味着您会更改位于单选按钮内的

span

或

div

的规则…您不能在css@avril中针对父级。这不起作用。我需要使用JavaScript或jquery设置所选单选按钮的父级div样式，只有css不起作用。

<div class="options"> 
<span class="option_radio">
        <input type="radio" name="payMethod" id="payMethod1" value="aaa" >
</span>
<span class="option_image">
    <label for="payMethod1">
        <img src="abc.png" >
    </label>
</span>
</div>

.options input[type="radio"]:checked span{
background-color:black;
}

.options input[type="radio"]:checked div.options{
background-color:black;
}

<input type="radio" name="payMethod" id="payMethod1" value="aaa" />

<div class="options"> 
<span class="option_radio">
</span>
<span class="option_image">
    <label for="payMethod1">
        <img src="abc.png" />
    </label>
</span>
</div>

input[type='radio']:checked + div.options {
  background-color:green;
}
input[type='radio']:checked + div.options span {
  background-color:red;
}  

var payMethod = document.querySelector('#payMethod1');

payMethod.onchange = function() {
    alert('clicked')
    // Get span and div
    if(this.checked) {
        var elements = document.querySelectorAll('.option_radio, .options');

        // Loop elements & add class
        for(var i = 0; i < elements.length; i++) {
            if (elements[i].classList)
              elements[i].classList.add("checked");
            else
              elements[i].className += ' checked';
        }
    }
};

//jQuery implementation
$('#payMethod1').change(function() {
   if($(this).is(':checked')) {
       $('.option_radio, .options').addClass('checked');
   }
});