JavaScript执行返回错误后恢复复选框选中状态的问题

我看了你的代码，发现有两个关键问题导致错误发生时复选框无法恢复到原始状态，咱们一步步来解决：

问题1：用attr()操作复选框选中状态是错误的 #

复选框的选中状态是DOM元素的属性（property），而非HTML标签的特性（attribute）。你当前用$this.attr('checked', false/true)来修改状态，只会修改初始的HTML特性，不会同步到DOM的实际选中状态，所以看起来没效果。正确的做法是用prop()方法来操作DOM属性。

问题2：布尔值与字符串的错误比较 #

在错误处理的代码里，你写了if (checkedState === 'true')，但checkedState是通过$(this).is(":checked")得到的布尔值（true/false），和字符串'true'做全等比较永远不会成立，这导致状态恢复的代码块根本没被执行。

修正后的完整代码 #

我把你的代码里的问题点都修正了，你可以直接替换使用：

$(document).ready(function() {
  $("input.select-item").click(function() {
    var recid = $(this).closest('td').attr('id');
    var checkedState = $(this).is(":checked");
    // 用let声明避免全局变量污染
    let $this = $(this);
    
    $.post('updateItem.php', {
      type: 'updateItem',
      recid: recid,
      selectionType: checkedState
    }, function(data) {
      data = JSON.parse(data);
      
      if (data.error) {
        var ajaxError = (data.text);
        var errorAlert = 'There was an error updating the Completed Checklist Item - ' + ajaxError + '. Please contact the Developer';
        $this.closest('td').addClass("table-danger");

        // 恢复原始状态：用prop()，并且直接用布尔值判断
        if (checkedState) {
          $this.prop('checked', false);
        } else {
          $this.prop('checked', true);
        }
        
        $("#updateSelectionsErrorMessage").html(errorAlert);
        $("#updateSelectionsError").show();
        return; 
      } else {
        $this.closest('td').addClass("table-success")
        $this.closest('td').removeClass("table-danger");

        // 注：这里的状态恢复逻辑看起来和成功业务逻辑矛盾，若不需要可以移除
        if (checkedState) {
          $this.prop('checked', false);
        } else {
          $this.prop('checked', true);
        }
      }
    }).fail(function(xhr) {
      var httpStatus = (xhr.status);
      var ajaxError = 'There was an error updating the Completed Checklist Item - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact the Developer';
      $this.closest('td').addClass("table-danger");
      
      // 准确恢复到点击前的原始状态
      $this.prop('checked', !checkedState);
      
      $("#updateSelectionsErrorMessage").html(ajaxError);
      $("#updateSelectionsError").show();
    });
  });
});

额外优化说明 #

• 给$this加上了let声明，避免它变成全局变量，防止多个复选框操作时出现状态冲突。
• 在AJAX失败的回调里，把固定设置false改成了!checkedState，这样能准确还原到用户点击前的原始状态。

备注：内容来源于stack exchange，提问作者user982124