jQuery 代码在选中复选框时有效，但在未选中时无效

Posted 2023-05-09

【中文标题】jQuery 代码在选中复选框时有效，但在未选中时无效

【英文标题】：jQuery code works when a checkbox is selected but doesn't work when unchecked

【发布时间】：2021-05-06 00:17:42

【问题描述】：

我有一个 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>

【参考方案1】：

问题是关于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>

【讨论】：

啊啊啊，太简单了！谢谢。