JavaScript移除复选框未选中类的方法及复选框联动类移除问题

嗨，咱们一步步来解决你的两个问题：

一、通用场景：如何在JavaScript中移除未选中复选框的类 #

核心逻辑很简单：判断复选框的选中状态，当它未被勾选时，移除目标元素上的指定类。下面分原生JS和jQuery两种方式举例：

原生JavaScript实现 #

// 获取所有需要监听的复选框
const checkboxes = document.querySelectorAll('.target-checkbox');

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 当复选框未选中时，移除自身的类
    if (!this.checked) {
      this.classList.remove('your-class-to-remove');
      
      // 如果是要移除关联元素（比如你场景里的LI），可以这样写
      // const relatedLi = document.querySelector(`#tree li[data-id="${this.dataset.id}"]`);
      // if (relatedLi) relatedLi.classList.remove('xxxxxxxxx');
    }
  });
});

jQuery实现 #

$('.target-checkbox').on('change', function() {
  const $checkbox = $(this);
  if (!$checkbox.is(':checked')) {
    // 移除复选框自身的类
    $checkbox.removeClass('your-class-to-remove');
    
    // 移除关联LI元素的类（对应你的场景）
    // $('#tree li').not('.FirstLi').removeClass('xxxxxxxxx');
  }
});

二、修复你的特定jQuery代码问题 #

你的现有代码只处理了“勾选时添加类”的逻辑，但没做“取消勾选时移除类”的分支判断。我帮你调整了代码，同时优化了禁用其他复选框的逻辑，让它更简洁：

修改后的完整代码 #

jQuery(document).ready(function($) {
    $('.First:checkbox').on('change', function() {
        const $checkbox = $(this);
        const isChecked = $checkbox.is(':checked');
        
        // 禁用/启用#input_1_106内除当前复选框外的所有复选框
        $checkbox.closest('#input_1_106')
                 .find(':checkbox')
                 .not($checkbox)
                 .prop('disabled', isChecked);
        
        // 根据选中状态，给目标LI添加或移除类
        const $targetLis = $('#tree li').not('.FirstLi');
        if (isChecked) {
            $targetLis.addClass('xxxxxxxxx');
        } else {
            $targetLis.removeClass('xxxxxxxxx');
        }
        
        // 确保当前复选框始终处于可用状态
        $checkbox.prop('disabled', false);
    });
});

关键改进说明： #

• 把click事件换成了change事件：复选框的状态变化可能通过键盘（比如按空格）触发，change事件能覆盖所有状态变更场景，更可靠。
• 添加了条件分支：根据isChecked的值，分别执行添加类或移除类的操作，这样取消勾选时就能自动移除LI元素的xxxxxxxxx类了。
• 优化了禁用逻辑：直接用.not($checkbox)过滤掉当前复选框，避免先禁用再恢复的冗余操作。

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