jQuery 代码在选中复选框时起作用，但在未选中时不起作用

问题描述

我有一个 jQuery 函数，它应该在检查时更改 <div> 的颜色。当它不检查时，就没有背景。检查时，它应该是黑色的。勾选时有效，取消勾选时无效。

这是我目前所做的：

$(document).on('change','#two_img_left_feature_img label.selected input',function () {
    if ($("#two_img_left_feature_img label.selected input").is(":checked")) {
        $('#two_img_left_feature_img').css('background','black');
    } else {
        $('#two_img_left_feature_img').css('background','white');
    }
});

HTML 很简单：

<div id="two_img_left_feature_img">
     <input type="checkBox" id="acf-block_60173d68d2c6a-field_5f8cf27e7c048-two_img_left_set_featured_img" name="acf-block_60173d68d2c6a[field_5f8cf27e7c048][]" value="two_img_left_set_featured_img">
</div>

解决方法

问题是关于 label.selected...当未选中复选框时，我猜标签没有 .selected 类。

因此，只需从事件处理程序选择器和条件中删除 label.selected。太具体了...

$(document).on("click","#two_img_left_feature_img input",function () {
  if ($("#two_img_left_feature_img input").is(":checked")) {
    $("#two_img_left_feature_img").css("background","black");
  } else {
    $("#two_img_left_feature_img").css("background","white");
  }
});

#two_img_left_feature_img {
  height: 200px;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="two_img_left_feature_img">
  <label>
    <input type="checkbox" id="acf-block_60173d68d2c6a-field_5f8cf27e7c048-two_img_left_set_featured_img" name="acf-block_60173d68d2c6a[field_5f8cf27e7c048][]" value="two_img_left_set_featured_img">
  </label>
</div>