求助：点击同一复选框实现类的添加与移除（替代document点击）

原来的代码逻辑有问题：每次点击复选框都会给document绑定新的点击事件，重复触发；而且只能靠点击页面其他区域移除类，没法通过点击同一复选框完成切换。下面给你两种简单的解决方法：

方法一：用toggleClass()一键切换（最省事） #

jQuery的toggleClass()方法会自动判断元素是否有目标类，有就移除，没有就添加，完美适配你的切换需求：

$('#inOrder').click(function(e) {
  e.stopPropagation(); // 保留你原来的阻止事件冒泡逻辑（如果不需要可以删掉）
  $('.border').toggleClass('colorsborder');
});

方法二：手动判断复选框状态控制类 #

如果需要更明确的逻辑，可以根据复选框是否被选中来手动添加/移除类：

$('#inOrder').click(function(e) {
  e.stopPropagation();
  const borderEle = $('.border');
  // 复选框被选中时加类，取消选中时移除类
  if (this.checked) {
    borderEle.addClass('colorsborder');
  } else {
    borderEle.removeClass('colorsborder');
  }
});

把原来的JS代码替换成上面任意一种就行，HTML不用改。

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