表格复选框checked属性设置异常：无法取消勾选的技术求助

嘿，我来帮你搞定这个小问题！你现在遇到的情况是代码只处理了勾选操作，完全没考虑取消勾选的逻辑，而且设置checked属性的写法也不够规范，咱们一步步来调整：

问题根源 #

你原来的代码里只判断了if (!$(this).find(".checkbox-input").prop("checked"))——也就是只有当复选框未勾选时才执行操作，但没写对应的逻辑处理已经勾选的情况，所以点第二次的时候啥反应都没有。另外，prop("checked", "checked")虽然能生效，但jQuery里设置布尔属性（比如checked）更推荐用布尔值true/false，这样逻辑会更清晰。

修复后的代码 #

最简单的方式是切换当前状态，也就是取反复选框现有的checked值：

$(".checkbox-action").click(function() {
  // 先找到当前点击区域内的复选框元素
  const $checkbox = $(this).find(".checkbox-input");
  // 切换勾选状态：当前是勾选就取消，未勾选就勾选
  $checkbox.prop("checked", !$checkbox.prop("checked"));
});

额外优化（可选） #

如果你的.checkbox-input本身是可以直接点击的，可能会出现点击复选框时同时触发外层.checkbox-action的点击事件，导致状态切换两次（等于没切换）。这种情况下可以给复选框加个阻止冒泡的逻辑：

$(".checkbox-input").click(function(event) {
  // 阻止事件冒泡到父元素
  event.stopPropagation();
});

这样点击复选框本身只会触发它自己的状态变化，点击外层区域也能正常切换状态啦～

内容的提问来源于stack exchange，提问作者Dolorosa