复选框在JavaScript中取消选中事件处理程序

Question

基本上我试图检测是否选中了复选框，然后在JavaScript中执行某些功能。以下是我设置复选框的方法：

 var content = "<table class=\"filter-table\">";
 content += "<tr><td><label><input class=\"moh_SC\"  type=\"checkbox\" id=\"cb_sc\" onclick=\"toggleOverlayer('moh_SC')\" checked='checked'>Service Coverage</label></td></tr>" +
           "<tr><td><div id=\"moh_SC\"></div></td></tr>";

 content += "<tr><td><label><input class=\"moh_HDD\"  type=\"checkbox\" onclick=\"toggleOverlayer('moh_HDD')\">HDB DU Density</label></td></tr>" +
           "<tr><td><div id=\"moh_HDD\"></div></td></tr>";

 content += "</table>"

onclick toggleOverlayer基本上只是通过传入ID并形成查询来切换地图图层。

如果选中第一个复选框，则应最小化窗口最小化。如果未经检查，应该再次最小化。所以，我想出了这些代码：

if($('#cb_sc').is(':checked'))
{
displayPSC();
maximise_poly_coverage_info_box();
}else 
{
minimise_poly_coverage_info_box();
}

当我第一次加载页面时，它是最大化的，这是正确的，因为我的第一个复选框默认设置为选中。但是当我取消选中第一个复选框时，它不会执行最小化的功能。我想知道如何做到这样：当取消选中复选框时，然后通过jQuery或JavaScript执行某些功能。

PS 我无法更改toggleOverlayer（），因为它可能会影响我的所有其他图层。

提前致谢。

工作版

//Maximized the window when first load cause the first checkbox is checked by default
           displayPSC();
           maximise_poly_coverage_info_box();

           //Checkbox event delegation
           $( "#cb_sc" ).on( "click", function( event ) {
               if($('#cb_sc').is(':checked'))
               {
                   displayPSC();
                   maximise_poly_coverage_info_box();
               }else 
               {
                   minimise_poly_coverage_info_box();
               }
           });