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

基本上，我试图检测是否选中了复选框，然后在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>"

当我第一次加载页面时，它被最大化，这是正确的，因为我的第一个复选框默认设置为checked。但是当我取消选中第一个复选框时，它不会执行最小化函数。我想知道如何做：当复选框未选中时，然后通过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();
               }
           });

---

请提供一把小提琴。或者试一试——你是如何绑定事件的很重要？向我们展示代码请原谅我做不到这一点，因为它太混乱了，因为所有的函数都是由以前的补丁不断添加的。My toggleOverlayer（）基本上只是接受ID并切换贴图层。看见edited@Satpal当然，我通过事件委托成功地做到了这一点。谢谢！！

//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();
               }
           });