A addEventListener won’t work in a html jQuery dark-light switcher

I tried redoing an “dark-light” mode toggler I got from a codepen. Originally the toggler used a onclick in the html to activate but that didn’t work so I tried makeing a addEventListener to solve the issue but now I realised that didn’t work either, I also tried making it with a jQuery on() but I could not get that to work (probably my fault). So now i’m asking what would be the simplest way of solving this.

Html:

                <label class="switch">
                  <input type="checkbox" id="checkBox" />
                  <span class="slider"></span>
                </label>

JS (jQuery):

$(document).ready(function () {

  $("#main").toggleClass(localStorage.toggled);

  document.getElementById("checkbox").addEventListener("click", darkLight);

  function darkLight() {
    if (localStorage.toggled != "dark") {
      $("body").toggleClass("dark", true);
      localStorage.toggled = "dark";
    } else {
      $("body").toggleClass("dark", false);
      localStorage.toggled = "";
    }
  }

  /*Add 'checked' property to input if background == dark*/
  if ($("main").hasClass("dark")) {
    $("#checkBox").prop("checked", true);
  } else {
    $("#checkBox").prop("checked", false);
  }

});