Question

所以我使用复选框黑客为了更改点击时的3个按钮，当有人点击一个按钮更改为选定的按钮图像，然后有人点击另一个按钮它将另一个按钮更改回原始图像和新的其他单击按钮进入选择。问题是我无法弄清楚如何有3种不同的选择状态。每种颜色一个。现在它只是显然使用了greenbtn，如何添加多个按钮使每个按钮都有自己选择的状态？

还出于某种原因内容：url无法在Firefox上运行？有没有其他方法可以做到这一点，我尝试了背景：网址，这在Chrome中不起作用！啊。

非常感谢!!!

所选按钮图像..

http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png
http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png
http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png

The Buttons ..

<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png">
</label>

<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png">
</label>

<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png">
</label>

CSS ......

label > input + img {
    cursor: pointer;
}
label > input {
    position: absolute;
    visibility: hidden;
    width: 130px;
}
label > input:checked + img {
    content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png");
}

label > input + img {
  cursor: pointer;
}
label > input {
  position: absolute;
  visibility: hidden;
  width: 130px;
}
label > input: checked + img {
  content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png");
}

<label>
  <input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
  <img src="http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png">
</label>

<label>
  <input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
  <img src="http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png">
</label>

<label>
  <input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
  <img src="http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png">
</label>

Answer 1

请勿使用image使用<div>或span

JS Fiddle

提供背景图片并在更改图片之前使用pseudo

HTML

<label>
    <input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
    <span class="check-green"></span>
</label>

CSS

.check-green {
    background:url(http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png);
    width:124px;
    height:30px;
}

label > input:checked + span:before {
    content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png");
    display:block;
}

Answer 2

您可以使用Javascript并为每个按钮注册点击事件。像这样的东西;

Jquery的

$('button1').click(function(){
   //do necessary changes
});

单击时更改标签输入，然后单击其他图像时更改为原始输入？

2 个答案: