Jquery 样式单选按钮组

我有一个有许多单选按钮的表单，每组按钮都在一个单选组中（每组三个）

我想做的是提出一个css解决方案，该解决方案具有以下特点：

• 单选按钮\u 0-单击时红色背景
• 单选按钮\u 1-单击时为红色背景
• 单选按钮2-单击时为灰色背景

有没有办法做到这一点，非常感谢您的帮助

input[type=radio]，input[type=checkbox]{
显示：无；
}
输入[类型=收音机]+标签，输入[类型=复选框]+标签{
显示：内联块；
保证金：-2px；
填充：4px12px；
页边距底部：0；
字体大小：14px；
线高：20px；
颜色：#333；
文本对齐：居中；
文本阴影：0 1px 1px rgba（255255255,0.75）；
垂直对齐：中间对齐；
光标：指针；
背景色：#F5；
背景图像：-moz线性梯度（顶部，#fff，#E6）；
背景图像：-webkit渐变（线性，0.0,0.100%，从（#fff）到（#e6））；
背景图像：-webkit线性渐变（顶部，#fff，#E6）；
背景图像：-o-线性梯度（顶部，#fff，#E6）；
背景图像：线性渐变（至底部，#fff，#E6）；
背景重复：重复-x；
边框：1px实心#ccc；
边框颜色：#e6e6#e6e6#bfbf；
边框颜色：rgba（0,0,0,0.1）rgba（0,0,0,0.1）rgba（0,0,0,0.25）；
边框底色：#B3；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ffffffff'，endColorstr='#ffe6e6e6'，GradientType=0）；
过滤器：progid:DXImageTransform.Microsoft.gradient（enabled=false）；
-webkit盒阴影：插入0 1px 0 rgba（255255255,0.2），0 1px 2px rgba（0,0,0.05）；
-moz盒阴影：插入0 1px 0 rgba（255255255,0.2），0 1px 2px rgba（0,0,0.05）；
盒影：插入0 1px 0 rgba（255255255,0.2），0 1px 2px rgba（0,0,0.05）；
}
输入[类型=收音机]：选中+标签，输入[类型=复选框]：选中+标签{
颜色：#FFF；
背景图像：无；
大纲：1；
-webkit盒阴影：插入0.2px 4px rgba（0,0,0,0.15），0.1px 2px rgba（0,0,0.05）；
-莫兹盒阴影：插入0.2px4pRGBA（0,0,0,0.15），0.1px2pRGBA（0,0,0,0.05）；
盒影：插入0.2px4pRGBA（0,0,0,0.15），0.1px2pRGBA（0,0,0,0.05）；
背景色：#CC0000；
}

项目1
SW0
SW1
清楚的

根据id输入您的

#条件2

：

#Condition_2:checked + label {
    background-color:grey;
}

jsIDLE:

根据id输入您的

#条件2

：

#Condition_2:checked + label {
    background-color:grey;
}

---

jsIDLE:

编辑：由于您现在发布了实际的HTML，此解决方案将不再有效。

确保单选按钮总成已包装，并使用类型为的第n个选择器，如下所示：

input[type=radio]:nth-of-type(1):checked + label,
input[type=checkbox]:nth-of-type(1):checked + label {
  background-color: #CC0000;
}
input[type=radio]:nth-of-type(2):checked + label,
input[type=checkbox]:nth-of-type(2):checked + label {
  background-color: #00cc00;
}
input[type=radio]:nth-of-type(3):checked + label,
input[type=checkbox]:nth-of-type(3):checked + label {
  background-color: #0000CC;
}

input[type=radio]，
输入[类型=复选框]{
显示：无；
}
输入[类型=收音机]+标签，
输入[类型=复选框]+标签{
显示：内联块；
保证金：-2px；
填充：4px12px；
页边距底部：0；
字体大小：14px；
线高：20px；
颜色：#333；
文本对齐：居中；
文本阴影：0 1px 1px rgba（255、255、255、0.75）；
垂直对齐：中间对齐；
光标：指针；
背景色：#F5；
背景图像：-moz线性梯度（顶部，#fff，#E6）；
背景图像：-webkit渐变（线性，0.0,0.100%，从（#fff）到（#e6））；
背景图像：-webkit线性渐变（顶部，#fff，#E6）；
背景图像：-o-线性梯度（顶部，#fff，#E6）；
背景图像：线性渐变（至底部，#fff，#E6）；
背景重复：重复-x；
边框：1px实心#ccc；
边框颜色：#e6e6#e6e6#bfbf；
边框颜色：rgba（0,0,0,0.1）rgba（0,0,0,0.1）rgba（0,0,0,0.25）；
边框底色：#B3；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ffffffff'，endColorstr='#ffe6e6e6'，GradientType=0）；
过滤器：progid:DXImageTransform.Microsoft.gradient（enabled=false）；
-webkit盒阴影：插入0 1px 0 rgba（255,255,255,0.2），0 1px 2px rgba（0,0,0,0.05）；
-moz盒阴影：插入0 1px 0 rgba（255,255,255,0.2），0 1px 2px rgba（0,0,0,0.05）；
框阴影：插入0 1px 0 rgba（255，255，255，0.2），0 1px 2px rgba（0，0，0.05）；
}
输入[类型=收音机]：选中+标签，
输入[类型=复选框]：选中+标签{
颜色：#FFF；
背景图像：无；
大纲：1；
-webkit盒阴影：插入0 2px 4px rgba（0,0,0,0.15），0 1px 2px rgba（0,0,0,0.05）；
-moz盒阴影：插入0.2px4pRGBA（0,0,0,0.15），0.1px2pRGBA（0,0,0,0.05）；
盒影：插入0.2px4pRGBA（0,0,0,0.15），0.1px2pRGBA（0,0,0,0.05）；
}
输入[类型=无线电]：第n个类型（1）：选中+标签，
输入[类型=复选框]：第n个类型（1）：选中+标签{
背景色：#CC0000；
}
输入[类型=无线电]：第n个类型（2）：选中+标签，
输入[类型=复选框]：第n个类型（2）：选中+标签{
背景色：#00cc00；
}
输入[类型=无线电]：第n个类型（3）：选中+标签，
输入[类型=复选框]：第n个类型（3）：选中+标签{
背景色：#0000CC；
}

单选按钮选择
选择1
选择2
选择3

编辑：由于您现在发布了实际的HTML，此解决方案将不再有效。

确保单选按钮总成已包装，并使用类型为的第n个选择器，如下所示：

input[type=radio]:nth-of-type(1):checked + label,
input[type=checkbox]:nth-of-type(1):checked + label {
  background-color: #CC0000;
}
input[type=radio]:nth-of-type(2):checked + label,
input[type=checkbox]:nth-of-type(2):checked + label {
  background-color: #00cc00;
}
input[type=radio]:nth-of-type(3):checked + label,
input[type=checkbox]:nth-of-type(3):checked + label {
  background-color: #0000CC;
}

input[type=radio]，
输入[类型=复选框]{
显示：无；
}
输入[类型=收音机]+标签，
输入[类型=复选框]+标签{
显示：内联块；
保证金：-2px；
填充：4px12px；
页边距底部：0；
字体大小：14px；
线高：20px；
颜色：#333；
文本对齐：居中；
文本阴影：0 1px 1px rgba（255、255、255、0.75）；
垂直对齐：中间对齐；
光标：指针；
背景色：#F5；
背景图像：-moz线性梯度（顶部，#fff，#E6）；
背景图像：-webkit渐变（线性，0.0,0.100%，从（#fff）到（#e6））；
背景图像：-webkit线性渐变（顶部，#fff，#E6）；
背景图像：-o-线性梯度（顶部，#fff，#E6）；
背景图像：线性渐变（至底部，#fff，#E6）；
背景重复：重复-x；
边框：1px实心#ccc；
边框颜色：#e6