jquery - 如何使单选按钮具有不同的颜色？

我有这个演示http://codepen.io/anon/pen/qZjOWj我想要的是，当用户在第一个单选按钮上时，它需要为蓝色，而当他在第二个单选按钮上时，则需要为绿色。有什么建议吗？

div {
  margin: 0 0 0.75em 0;
}

input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  color: #292321;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

input[type="radio"] + label span {
  display: inline-block;
  width: 19px;
  height: 19px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

input[type="radio"] + label span {
  background-color: white;
  border: 1px solid black;
}

input[type="radio"]:checked + label span {
  background-color: blue;
  border: 1px solid blue;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition: background-color 0.4s linear;
  -o-transition: background-color 0.4s linear;
  -moz-transition: background-color 0.4s linear;
  transition: background-color 0.4s linear;
}

<div>
  <input type="radio" checked="checked" id="radio01" name="radio" />
  <label for="radio01"><span></span>Radio Button 1</label>
</div>

<div>
 <input type="radio" id="radio02" name="radio" />
 <label for="radio02"><span></span>Radio Button 2</label>
</div>

最佳答案

现在，在CSS中，您只需要检查是否选中了任何单选按钮，然后将其涂成蓝色即可。您需要创建一个选项，以便可以在单选按钮之间进行区分（例如，为它们提供不同的颜色）。

类对此非常有用，它们几乎是针对此功能的。
调整您的HTML，使其看起来像这样：

<div>
  <input type="radio" checked="checked" class="blue" id="radio01" name="radio" />
  <label for="radio01"><span></span>Radio Button 1</label>
</div>

<div>
 <input type="radio" id="radio02" class="green" name="radio" />
 <label for="radio02"><span></span>Radio Button 2</label>
</div>

注意，单选按钮的类属性现在有何不同（因此，您现在可以分别访问它们了。）

像这样修改您的CSS：

input[type="radio"].green:checked + label span{
     background-color:green;
     border:1px solid blue;
}

input[type="radio"].blue:checked + label span{
     background-color:blue;
     border:1px solid blue;
}

现在，您的CSS将绘制其类别分别设置为蓝色，蓝色和分类为绿色，绿色的单选按钮。