如何用jQuery切换复选框实现网站颜色状态的切换与还原？

嘿，我来帮你搞定这个颜色切换的小难题！你的核心需求是点击复选框时切换元素样式，再次点击恢复原状，不用切换CSS文件对吧？目前你的代码只实现了“切换到新样式”，没处理“恢复原始样式”的逻辑，而且用on()/off()的方式也不对，咱们一步步来改。

方法一：用状态变量控制样式切换 #

这种方法基于你现有的代码修改，通过一个变量记录当前的切换状态，每次触发时判断状态来设置或恢复样式：

首先定义一个全局状态变量，用来标记是否已经切换了颜色：

let isColorToggled = false;

然后修改你的toggleColor函数，让它根据状态变量判断要执行的操作：

function toggleColor() {
  if (isColorToggled) {
    // 恢复原始样式：这里可以直接清空CSS属性（会回到样式表中的默认值），或者手动设置原始值
    $('section').css({
      'background-color': '',
      'border': ''
    });
  } else {
    // 设置切换后的样式
    $('section').css({
      'background-color': '#fff',
      'border': '3px solid #000'
    });
  }
  // 切换状态标记
  isColorToggled = !isColorToggled;
}

最后简化复选框的change事件逻辑，用toggleClass代替手动添加/移除active类，直接调用toggleColor即可：

$('.switch input:checkbox').change(function(){
  $(this).toggleClass("active");
  toggleColor();
  console.log(isColorToggled ? 'ON' : 'OFF');
});

方法二：用CSS类切换（更推荐） #

这种方法把样式逻辑完全交给CSS，JS只负责切换类名，代码更简洁易维护，也不用担心记错原始样式值：

首先在CSS中定义原始样式和切换后的样式类：

/* 原始样式 */
section {
  background-color: #eee; /* 替换成你实际的原始背景色 */
  border: 1px solid #ccc; /* 替换成你实际的原始边框样式 */
  /* 其他原始样式 */
}

/* 切换后的样式类 */
section.color-toggled {
  background-color: #fff;
  border: 3px solid #000;
}

然后JS部分变得非常简单，toggleColor只需要切换类名：

function toggleColor() {
  $('section').toggleClass('color-toggled');
}

$('.switch input:checkbox').change(function(){
  $(this).toggleClass("active");
  toggleColor();
  console.log($(this).is(':checked') ? 'ON' : 'OFF');
});

为什么你之前的on()/off()没效果？ #

on()和off()是用来绑定和解除事件监听的，而你的需求是每次点击复选框都要执行切换逻辑，不是绑定一次就解除。所以直接用change事件监听即可，每次触发事件时执行切换操作，不需要额外用on()/off()绑定click事件哦。

内容的提问来源于stack exchange，提问作者Cam O'Brien