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

Question

我有这个演示 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>

Answer 1

现在在您的 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 将绘制类设置为蓝色、蓝色的单选按钮，以及类设置为绿色、绿色的单选按钮。