Question

我有一个单选按钮，我需要在选中单选按钮时为其父div添加样式。这个我只需要用css做。在下面的html中，如果选中了收音机，我需要将颜色应用于div＆＃34;选项＆＃34;

HTML

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

有人可以帮我这个

Answer 1

抱歉，还不能那样做。你只能沿着树而不是向上走。您将需要制作您想要设置单元格的元素或单选按钮的后代。祖先选择器尚不存在：

http://css-tricks.com/parent-selectors-in-css/

Answer 2

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

CSS

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

Answer 3

这需要使用来自CSS4 http://www.w3.org/TR/selectors4/的父选择器。遗憾的是CSS4尚不可用。所以对于今天来说，使用纯css是不可能的。

Answer 4

Javascript是你的答案。 Provided Vanilla and jQuery examples

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');
   }
});

使用css检查单选按钮时，为div添加背景颜色

4 个答案: