ASP.NET Razor页面复选框异常：仅能选中All，无法单独选其他项

你的问题核心出在JS逻辑错误：不管哪个复选框触发change事件，代码都会强制把所有非All复选框的状态和All复选框保持一致。比如你刚选中X，因为此时All没被勾选，代码立刻把X的checked设为false，导致无法单独选中任何非All选项。

修复后的JS代码 #

$(document).on('change', '.classCheckbox', function(event) {
  var allCheckbox = $('.classCheckbox[value="0"]');
  var checkboxes = $('.classCheckbox').not(allCheckbox);
  var currentCheckbox = $(this);

  // 仅操作All复选框时，同步其他所有复选框的状态
  if (currentCheckbox.val() === "0") {
    checkboxes.prop('checked', allCheckbox.prop('checked'));
  } else {
    // 操作非All复选框时，根据选中情况更新All的状态
    var checkedCount = checkboxes.filter(':checked').length;
    allCheckbox.prop('checked', checkedCount === checkboxes.length);
  }

  // 收集选中的ID和文本，保留原有AJAX逻辑
  var selectedClassIds = [];
  var selectedClassIdsValues = [];
  $('.classCheckbox:checked').each(function() {
    selectedClassIds.push($(this).val());
    selectedClassIdsValues.push($(this).next().text()); // 原HTML无span标签，直接取相邻文本
  });

  if (selectedClassIds.length > 0) {
    $.ajax({
      url: '?handler=CheckedAccountClassName',
      type: 'GET',
      traditional: true,
      data: {
        classIds: selectedClassIds,
        classIdsValues: selectedClassIdsValues
      },
      success: function(response) {
        $('#subClassesList').empty();
        $('#subClassesContainer').show();

        var subClassesContainer = $('<div data-class-id="' + selectedClassIds + '"></div>');
        $.each(response, function(i, item) {
          $(subClassesContainer).append('<input type="checkbox" class="subclassCheckbox" name="selectedSubClasses" value="' + item.subClassAccountId + '" /> ' + item.subClassAccountName + '<br />');
        });
        $('#subClassesList').append(subClassesContainer);
      }
    });
  } else {
    // 无选中项时隐藏子类容器，优化体验
    $('#subClassesContainer').hide();
    $('#subClassesList').empty();
  }
})

关键修改说明 #

1. 区分触发事件的复选框：只有操作All复选框时才同步其他选项状态，操作非All选项时仅更新All的状态（所有非All都选中时，All自动勾选；只要有一个未选中，All自动取消）。
2. 修复文本获取逻辑：原HTML中复选框后没有<span>标签，将$(this).next('span').text()改为$(this).next().text()，确保能正确获取选项文本。
3. 补充空选中处理：没有选中任何选项时隐藏子类容器，提升交互体验。

保留原HTML和CSS #

label {
  margin-right: 1rem;
}

<label><input type="checkbox" class="classCheckbox" value="0">All</label>
<label><input type="checkbox" class="classCheckbox" value="X">X</label>
<label><input type="checkbox" class="classCheckbox" value="Y">Y</label>
<label><input type="checkbox" class="classCheckbox" value="Z">Z</label>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

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