如果项目不等于全部，复选框列表不允许我检查任何项目？

Question

我正在开发一个 asp.net razor 页面。我面临的问题是，除了所有复选框之外，我无法选择任何已选中的复选框。

如果选中所有复选框，则所有选中的复选框都可以正常工作。

如果所有复选框均未选中，则所有复选框均未选中且工作正常。

当选择任何不等于全部的项目时，我的问题是，如果我选择，则不会检查。

那么如何解决这个问题呢？

代码片段

$(document).on('change', '.classCheckbox', function(event) {

  var allCheckbox = $('.classCheckbox[value="0"]');
  var checkboxes = $('.classCheckbox').not(allCheckbox);

  if (allCheckbox.prop('checked')) {
    checkboxes.prop('checked', true);
  } else {
    checkboxes.prop('checked', false);
  }
  var selectedClassIds = [];
  var selectedClassIdsValues = []; // Array to store selected values

  $('.classCheckbox:checked').each(function() {
    selectedClassIds.push($(this).val());
    selectedClassIdsValues.push($(this).next('span').text());
  });

  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);
      }
    });
  }
})

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>

Answer 1

像这样的东西...？

document.querySelectorAll('#cAll, #cX, #cY, #cZ')
.forEach( (cbx,_,All) =>
  {
  cbx.addEventListener('change', ()=>
    {
    if (cbx.checked && cbx.value === '0')
      All.forEach( c => c.checked = true);
    else if (!cbx.checked)
      All[0].checked = false;
    })
  });

<label><input type="checkbox" id="cAll" value="0">All</label>
<label><input type="checkbox" id="cX" value="X">X</label>
<label><input type="checkbox" id="cY" value="Y">Y</label>
<label><input type="checkbox" id="cZ" value="Z">Z</label>