Activate/deactivate 独特的图像（图标）而不是复选框

Question

我正在尝试用选中时会改变不透明度的图标替换复选框。

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

在最终版本中，我将向输入元素添加 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

正如 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');
  }
})

为了缩短代码，我使用 ternary operator 根据选中状态设置不透明度：

$("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 2

我建议根本不要使用 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 3

要回答这个问题，您没有以在 jquery 中有效的方式获取 checked 属性。 I made a JSFiddle 为您自己的代码提供更好的解决方案以及为什么它不起作用。

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

$(".img-checkbox").click(function () {
    var img = $(this);

   if (img.prev().prop("checked")) {
        img.css({
            'opacity': '0.3'
        });
    } else {
        img.css({
            'opacity': '1.0'
        });
    }
});

Activate/deactivate 独特的图像（图标）而不是复选框

Activate/deactivate unique images (icons) instead of checkboxes

css

checkbox

jquery