单选按钮检查效果单个外部元素

Question

一个简单的问题，一个 CSS 单选按钮可以在它所在的元素之外产生效果。

例如：

<div class="radio">
      <input id="radio-green" type="radio" name="radio-b"/>
      <label for="radio-green">Green</label>

      <input id="radio-blue" type="radio" name="radio-b" checked />
      <label for="radio-blue">Blue</label>

      <input id="radio-yellow" type="radio" name="radio-b"/>
      <label for="radio-yellow">Yellow</label>

      <input id="radio-red" type="radio" name="radio-b"/>
      <label for="radio-red">Red</label>

      <input id="radio-white" type="radio" name="radio-b"/>
      <label for="radio-white">White</label>
</div>

<div class="square"></div>

CSS 是这样的吗？

.square {
width:300px;
height:300px;
margin:0 auto;
background:red;
}
input#radio-green:checked .square {background:green;}

或者我需要使用 JS 吗？

这是一个 JS 小提琴http://jsfiddle.net/m8fxw/

谢谢

Answer 1

如果他们不在他们的父母<div> 内，你可以这样做，因为他们是兄弟姐妹。不幸的是，CSS 规则不允许您遍历树。

如果您将它们从<div class="radio"> 中取出，那么您可以使用~ 兄弟组合器：

#radio-green:checked ~ .square {background:green;}

Demo

否则，我可能会在单击每个收音机时使用 JS 向 <div class="radio> 添加一个类，然后相应地设置正方形的样式。

Answer 2

如果你知道 jQuery，你可以使用：

$('input[type=radio]').click(function() {
    var $this = $(this);
    $('.square').css('background', $(this).next().text());
})

Updated Fiddle