复选框未停留“已检查”

Question

我最近请求帮助让我的图片替换复选框。我已经完成了，但是当我“检查”我的盒子时，我希望它们保持在opacity:1或者用新的图像替换图像。 （首先测试不透明度的想法。）到目前为止，我的想法都没有奏效。以下JSFiddle是我到目前为止所拥有的！

JSFiddle

input[type=checkbox].equipment {
  display: none;
}
label {
  display: inline-block;
  padding: 0 0 0 0px;
  -webkit-transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  -o-transition: opacity 0.25s;
  transition: opacity 0.25s;
}
.speaker {
  height: 150px;
  width: 150px;
  border-radius: 5px;
  cursor: pointer;
  background: url(http://www.djscimmia.com/new-web/_assets/b615_150px.png);
  opacity: 0.5;
}
.speaker:hover {
  opacity: 1;
}
.subwoofer {
  height: 150px;
  width: 150px;
  border-radius: 5px;
  cursor: pointer;
  background: url(http://www.djscimmia.com/new-web/_assets/b1800hp_150px.png);
  opacity: 0.5;
}
.subwoofer:hover {
  opacity: 1;
}
.smokemachine {
  height: 150px;
  width: 150px;
  border-radius: 5px;
  cursor: pointer;
  background: url(http://www.djscimmia.com/new-web/_assets/smoke_150px.png);
  opacity: 0.5;
}
.smokemachine:hover {
  opacity: 1;
}
input[type=checkbox] + label.speaker {
  background: url(http://www.djscimmia.com/new-web/_assets/b615_150px.png) no-repeat;
  cursor: pointer;
  opacity: 0.5;
}
input[type=checkbox] + label.subwoofer {
  background: url(http://www.djscimmia.com/new-web/_assets/b1800hp_150px.png) no-repeat;
  cursor: pointer;
  opacity: 0.5;
}
input[type=checkbox] + label.smokemachine {
  background: url(http://www.djscimmia.com/new-web/_assets/smoke_150px.png) no-repeat;
  cursor: pointer;
  opacity: 0.5;
}
input[type=checkbox]:checked + label {
  opacity: 1;
}

<label class="equipment-lab speaker" for="speaker">
  <input type="checkbox" name="equipment" value="speaker" id="speaker" class="equipment">
</label>
<label class="equipment-lab subwoofer" for="subwoofer">
  <input type="checkbox" name="equipment" value="subwoofer" id="subwooder" class="equipment">
</label>
<label class="equipment-lab smokemachine" for="smoke-machine">
  <input type="checkbox" name="equipment" value="smoke-machine" id="smoke-machine" class="equipment">
</label>

Answer 1

根据您当前的标记，label是input的父级而不是兄弟，但您使用的选择器是兄弟选择器（+），因此它不会不要选择或更改标签的不透明度。在CSS中，我们无法根据子元素的子状态选择和设置父元素的样式，因此需要更改标记。

更改标记后，我们可以使用以下选择器选择label样式并设置样式：

input[type=checkbox]:checked + label {
  background: url(http://www.djscimmia.com/new-web/_assets/b615_150px.png);
  opacity: 1;
}

上面的选择器选中label，它是复选框的相邻（紧邻的下一个）兄弟，并且会更改其opacity和background-image。

input[type=checkbox].equipment {
  display: none;
}
label {
  display: inline-block;
  padding: 0 0 0 0px;
  -webkit-transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  -o-transition: opacity 0.25s;
  transition: opacity 0.25s;
}
.equipment-lab {
  height: 150px;
  width: 150px;
  border-radius: 5px;
}
input[type=checkbox]:checked + label {
  background: url(http://www.djscimmia.com/new-web/_assets/b615_150px.png);
  opacity: 1;
}
.speaker {
  background: url(http://www.djscimmia.com/new-web/_assets/b615_150px.png);
  opacity: 0.5;
  cursor: pointer;
}
.subwoofer {
  background: url(http://www.djscimmia.com/new-web/_assets/b1800hp_150px.png);
  opacity: 0.5;
  cursor: pointer;
}
.smokemachine {
  background: url(http://www.djscimmia.com/new-web/_assets/smoke_150px.png);
  opacity: 0.5;
  cursor: pointer;
}

<input type="checkbox" name="equipment" value="speaker" id="speaker" class="equipment">
<label class="equipment-lab speaker" for="speaker">
</label>
<input type="checkbox" name="equipment" value="subwoofer" id="subwoofer" class="equipment">
<label class="equipment-lab subwoofer" for="subwoofer">
</label>
<input type="checkbox" name="equipment" value="smoke-machine" id="smoke-machine" class="equipment">
<label class="equipment-lab smokemachine" for="smoke-machine">
</label>

如果您希望每个图像的图像不同，那么您可以编写如下所示的多个选择器，并为其添加适当的background设置。

#speaker:checked + label.speaker {
  background: url(http://www.djscimmia.com/new-web/_assets/b1800hp_150px.png);
  opacity: 1;
}
#subwoofer:checked + label.subwoofer {
  background: url(http://www.djscimmia.com/new-web/_assets/smoke_150px.png);
  opacity: 1;
}
#smoke-machine:checked + label.smokemachine {
  background: url(http://www.djscimmia.com/new-web/_assets/b615_150px.png);
  opacity: 1;
}

input[type=checkbox].equipment {
  display: none;
}
label {
  display: inline-block;
  padding: 0 0 0 0px;
  -webkit-transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  -o-transition: opacity 0.25s;
  transition: opacity 0.25s;
}
.equipment-lab {
  height: 150px;
  width: 150px;
  border-radius: 5px;
}
#speaker:checked + label.speaker {
  background: url(http://www.djscimmia.com/new-web/_assets/b1800hp_150px.png);
  opacity: 1;
}
#subwoofer:checked + label.subwoofer {
  background: url(http://www.djscimmia.com/new-web/_assets/smoke_150px.png);
  opacity: 1;
}
#smoke-machine:checked + label.smokemachine {
  background: url(http://www.djscimmia.com/new-web/_assets/b615_150px.png);
  opacity: 1;
}
.speaker {
  background: url(http://www.djscimmia.com/new-web/_assets/b615_150px.png);
  opacity: 0.5;
  cursor: pointer;
}
.subwoofer {
  background: url(http://www.djscimmia.com/new-web/_assets/b1800hp_150px.png);
  opacity: 0.5;
  cursor: pointer;
}
.smokemachine {
  background: url(http://www.djscimmia.com/new-web/_assets/smoke_150px.png);
  opacity: 0.5;
  cursor: pointer;
}

<input type="checkbox" name="equipment" value="speaker" id="speaker" class="equipment">
<label class="equipment-lab speaker" for="speaker">
</label>
<input type="checkbox" name="equipment" value="subwoofer" id="subwoofer" class="equipment">
<label class="equipment-lab subwoofer" for="subwoofer">
</label>
<input type="checkbox" name="equipment" value="smoke-machine" id="smoke-machine" class="equipment">
<label class="equipment-lab smokemachine" for="smoke-machine">
</label>

要在已选中和未选中状态之间创建渐变过渡，只需在transition中添加label设置（这已经在您的代码段中，但没有太多视觉效果，持续时间非常小。）

label {
  display: inline-block;
  padding: 0 0 0 0px;
  -webkit-transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  -o-transition: opacity 0.25s;
  transition: opacity 0.25s;
}

需要注意的一点是，只有opacity更改可以转换，background更改将立即生效，因为background is not a transitionable property as per specs。也就是说你仍然可以使用精灵概念来动画background-position，从而产生逐渐变化的效果。有一个样本here。

（免责声明：该演示中使用的图片不是我的，是从here中挑选出来的。）

  

注意：如果您在评论中遇到与Gene R相同的误解，我只是展示如何替换图片。使用的图像只是样本，可以用任何所需的图像URL替换。

Answer 2

有些事情妨碍了你，主要是你的选择器试图检测：标签的检查状态，而不是输入[type = checkbox]，你需要一些jQuery来确保你的盒子被检查。

＆＃13;

＆＃13;

$('input.equipment').click(function(){
	($(this)[0].hasAttribute("checked")) ? $(this).removeAttr("checked"):$(this).attr("checked","checked");
	$(this).closest('label').toggleClass('opaque');
});

＆＃13;

input[type=checkbox].equipment {
    display: none;
}

label {
    display: inline-block;
    padding: 0 0 0 0px;
    -webkit-transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    transition: opacity 0.25s;
}

.equipment-lab{
    height: 150px;
    width: 150px;
    border-radius: 5px;
}

.speaker {
    background: url(http://www.djscimmia.com/new-web/_assets/b615_150px.png);
    opacity: 0.5;
    cursor: pointer;
}

.subwoofer {
    background: url(http://www.djscimmia.com/new-web/_assets/b1800hp_150px.png);
    opacity: 0.5;
    cursor: pointer;
}

.smokemachine {
    background: url(http://www.djscimmia.com/new-web/_assets/smoke_150px.png);
    opacity: 0.5;
    cursor: pointer;
}

.opaque {
    opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="equipment-lab speaker" for="speaker">
    <input type="checkbox" name="equipment" value="speaker" id="speaker" class="equipment">
</label>
<label class="equipment-lab subwoofer" for="subwoofer">
    <input type="checkbox" name="equipment" value="subwoofer" id="subwoofer" class="equipment">
</label>
<label class="equipment-lab smokemachine" for="smoke-machine">
    <input type="checkbox" name="equipment" value="smoke-machine" id="smoke-machine" class="equipment">
</label>

＆＃13;

＆＃13;

＆＃13;