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

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

2 个答案: