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

如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）。在这里，我隐藏了您建议您在最后一次通行证中执行的复选框。

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

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

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

3 个答案: