激活/停用唯一图像(图标)而不是复选框

Question

我正在尝试用图标代替复选框，当选择时图标会改变不透明度。

最初，所有图像都应该具有低透明度。当点击时，点击的图像应该改变为完全不透明度。如果再次点击，图像应该返回到低不透明度。

在最终版本中，我将把display:none添加到输入元素中，这样实际的复选框就不会显示了。

我做错了什么?

$(".img-checkbox").click(function() {
  var img = $(this);
  if (img.prev().checked) {
    img.css('opacity', '0.3');
  } else {
    img.css('opacity', '1.0');
  }
})

.img-checkbox {
  opacity: 0.3;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="checkbox">
    <label class="checkbox-inline">
      <input type="checkbox" name="qRequirements" value="pool">
      <img src="http://placehold.it/33x33" class="img-responsive img-checkbox">
    </label>
  </div>
  <div class="checkbox">
    <label class="checkbox-inline">
      <input type="checkbox" name="qRequirements" value="pets allowed">
      <img src="http://placehold.it/33x33" class="img-responsive img-checkbox">
    </label>
  </div>
  <div class="checkbox">
    <label class="checkbox-inline">
      <input type="checkbox" name="qRequirements" value="elevator">
      <img src="http://placehold.it/33x33" class="img-responsive img-checkbox">
    </label>
  </div>
  <div class="checkbox">
    <label class="checkbox-inline">
      <input type="checkbox" name="qRequirements" value="wifi">
      <img src="http://placehold.it/33x33" class="img-responsive img-checkbox">
    </label>
  </div>
</div>

Answer 1

我建议不要使用jQuery(或javascript)。在这里，我已经隐藏了复选框，因为你建议你在你的最后一关。

/* image checkbox buttons */
.img-checkbox {
    opacity: 0.3;
    margin-bottom: 5px;
}
:checked+.img-checkbox {
    opacity: 1;
}
/* Extra assumed classes */
.checkbox > label > input[type=checkbox]
{
  display:none;
}
.checkbox-inline, .checkbox
{
  display: inline-block;
}

<div class="form-group">			
    <div class="checkbox"><label class="checkbox-inline"><input type="checkbox" name="qRequirements" value="pool"><img src="http://placehold.it/33x33" class="img-responsive img-checkbox"></label></div>
    <div class="checkbox"><label class="checkbox-inline"><input type="checkbox" name="qRequirements" value="pets allowed"><img src="http://placehold.it/33x33" class="img-responsive img-checkbox"></label></div>
    <div class="checkbox"><label class="checkbox-inline"><input type="checkbox" name="qRequirements" value="elevator"><img src="http://placehold.it/33x33" class="img-responsive img-checkbox"></label></div>
    <div class="checkbox"><label class="checkbox-inline"><input type="checkbox" name="qRequirements" value="wifi"><img src="http://placehold.it/33x33" class="img-responsive img-checkbox"></label></div>
</div>

Answer 2

正如Robert McKee所提到的，这里不需要使用JavaScript，可以避免使用简单的CSS解决方案。但是，您可能对学习JavaScript(特别是jQuery)感兴趣，或者您没有展示的其他功能可能依赖于它。

在这种情况下，我建议将事件侦听器绑定到输入本身而不是图像。在下面的例子中，当一个复选框改变状态时，相关的图像被定义为选中复选框后的。next()图像元素。

我避免使用jQuery来引用选中的状态，因为在纯JavaScript中这样做相对简单(this.checked)，我发现它比等效的jQuery更具可读性。

$("input[type=checkbox]").on('click', function() {
  var $img = jQuery(this).next('img');
  if (this.checked) {
    $img.css('opacity', '1');
  } else {
    $img.css('opacity', '0.3');
  }
})

为了缩短代码，我使用了一个三元运算符来根据选中的状态设置不透明度:

$("input[type=checkbox]").on('click', function() {
  jQuery(this).next('img').css('opacity', this.checked ? '1.0' : '0.3');
})

演示如下:

$("input[type=checkbox]").on('click', function() {
  jQuery(this).next('img').css('opacity', this.checked ? '1.0' : '0.3');
});

.img-checkbox {
  opacity: 0.3;
  margin-bottom: 5px;
}
input {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="checkbox">
    <label class="checkbox-inline">
      <input type="checkbox" name="qRequirements" value="pool">
      <img src="http://placehold.it/33x33" class="img-responsive img-checkbox">
    </label>
  </div>
  <div class="checkbox">
    <label class="checkbox-inline">
      <input type="checkbox" name="qRequirements" value="pets allowed">
      <img src="http://placehold.it/33x33" class="img-responsive img-checkbox">
    </label>
  </div>
  <div class="checkbox">
    <label class="checkbox-inline">
      <input type="checkbox" name="qRequirements" value="elevator">
      <img src="http://placehold.it/33x33" class="img-responsive img-checkbox">
    </label>
  </div>
  <div class="checkbox">
    <label class="checkbox-inline">
      <input type="checkbox" name="qRequirements" value="wifi">
      <img src="http://placehold.it/33x33" class="img-responsive img-checkbox">
    </label>
  </div>
</div>

Answer 3

要回答这个问题，您没有以在jquery中工作的方式抓取checked属性。我做了一个JSFiddle，为您自己的代码提供了一个更好的解决方案，并解释了为什么它不起作用。

然而，不同的答案可能更有效。

$(".img-checkbox").click(function () {
    var img = $(this);
   if (img.prev().prop("checked")) {
        img.css({
            'opacity': '0.3'
        });
    } else {
        img.css({
            'opacity': '1.0'
        });
    }
});