jQuery将类按钮操作切换为复选框操作

嗨，我使用Wordpress和主题生成器DIVI的代码。 我是一个真正的JS和jQuery初学者。 该代码提供了在按下按钮时具有夜间模式的功能。 我在Codepen上找到了一个定制的切换开关按钮，我很喜欢它，我很想在下面的代码中使用它。 这段JQuery代码是为按钮操作“单击”而编写的，但我希望对其进行自定义，以对“复选框”作出反应。 是否可以使用复选框创建toggleclass

以下是链接：

jQuery（文档）.ready（函数（）{
//藏起来
jQuery（“#rv_按钮”）。单击（函数（e）{
e、 preventDefault（）；jQuery（“.reveal”）.toggleClass（'light-dark'，1000）；
jQuery（“#rv_按钮”）.toggleClass（'open closed'）；
});
});

你看起来像这样吗

<style>
.light{
  background:red;
}
.dark{
  background:green;
}
</style>

<div class="container">
  <div class="row">
    <input type="checkbox" class="checkboxdav" id="customCheck1"><span class="color_code dark">Checkbox</span>   
  </div>
</div>

</body>
<script>
 $(document).ready(function() {
  $(".checkboxdav").on("click", function(e) {
      $(".color_code").toggleClass('light dark');
  });
});
</script>

.光{
背景：红色；
}
.黑暗{
背景：绿色；
}
复选框
$（文档）.ready（函数（）{
$（.checkboxdav”）。在（“单击”，函数（e）{
$（“.color_code”）.toggleClass（'light-dark'）；
});
});

Hello Jim，使用复选框切换类是绝对可能的。你能分享一下你为构建React版本所采取的步骤吗？这样我们就可以迭代并得出答案了？

<style>
.light{
  background:red;
}
.dark{
  background:green;
}
</style>

<div class="container">
  <div class="row">
    <input type="checkbox" class="checkboxdav" id="customCheck1"><span class="color_code dark">Checkbox</span>   
  </div>
</div>

</body>
<script>
 $(document).ready(function() {
  $(".checkboxdav").on("click", function(e) {
      $(".color_code").toggleClass('light dark');
  });
});
</script>