如何在其他页面上创建调用jQuery函数的复选框事件

Question

我想要在theme.php中有一个复选框来触发front.php中的一个函数它将css文件从默认的白色背景更改为蓝色背景。取消选中复选框会将其恢复为默认值。我尝试了各种不同的方法，从在theme.php中使用脚本到使用所有不同的jQuery函数将其移动到front.php，包括加载、更改、单击、发布、使用if/else、附加到front.php中的头标记。。。什么都不管用
在theme.php 中

<div class="main-content">
    <input type="checkbox" id="front"/>
    <label for="front">FrontEnd</label>
</div> 

和在前面。php

const frontEnd = document.querySelector("#front");
frontEnd.addEventListener('change', function(e) {
    if(frontEnd.checked){
        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.type = "text/css";
        link.href = "css/blue.css";
        document.getElementsByTagName("head")[0].appendChild(link);
    }else{
        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.type = "text/css";
        link.href = "css/default.css";
        document.getElementsByTagName("head")[0].appendChild(link);
    }
});

关于我可能遗漏了什么，有什么建议吗？干杯

Answer 1

$(document).ready(function($){
  $('#test').click(function(){
    $("#main-div").toggleClass('class-yellow');
  });
  // $('#test').prop('checked', true);  //Checks it
 // $('#test').prop('checked', false);  //Unchecks it
});

.class-yellow {
  background:yellow;
  width:200px;
  padding:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='main-div'>
  <label for="test">adding style when click</label>
  <input type="checkbox" id='test'>
</div>