javascript - 复选框触发事件

Question

我在复选框触发事件方面遇到一些问题。以下是我设置复选框的方法:

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

            content += "<tr><td><label><input class=\"park_analysis_refined_b_e\"  type=\"checkbox\" id=\"cb_buffer\" onclick=\"toggleOverlayer('park_analysis_refined_b_e')\" >MP2008 Parks Buffer</label></td></tr>" +
                   "<tr><td><div id=\"park_analysis_refined_b_e\"></div></td></tr>";

            content += "<tr><td><label><input class=\"park_analysis_refined_a\"  type=\"checkbox\" onclick=\"toggleOverlayer('park_analysis_refined_a')\">DMP2013 Additional Parks</label></td></tr>" +
                   "<tr><td><div id=\"park_analysis_refined_a\"></div></td></tr>";

            content += "<tr><td><label><input class=\"park_analysis_refined_b_a\"  type=\"checkbox\" id=\"cb_additionalBuffer\" onclick=\"toggleOverlayer('park_analysis_refined_b_a')\">DMP2013 Additional Parks Buffer</label></td></tr>" +
                   "<tr><td><div id=\"park_analysis_refined_b_a\"></div></td></tr>";

            content += "</table>"

我有一个事件委托(delegate)来检查某个复选框上是否有事件，它将执行以下方法:

//Event delegation to maximize/minimize window
            $( "#cb_buffer" ).on( "click", function( event ) {
                   if($('#cb_buffer').is(':checked'))
                   {
                       selectionPGRefined();
                       maximisePGRWindow();
                   }
                   else
                   {
                       minimisePGRWindow();
                   }
               });
            $( "#cb_additionalBuffer" ).on( "click", function( event ) {
                   if($('#cb_additionalBuffer').is(':checked'))
                   {
                       selectionPGRefined();
                       maximisePGRWindow();
                   }
                   else
                   {
                       minimisePGRWindow();
                   }
               });

目前运行良好。但是当我选中两个复选框并取消选中其他复选框时，就会出现问题。基本上我的程序的工作原理是当用户选中第二个复选框时，它将添加一个覆盖图。同时，它会调用maximizedWindow方法。第四个也是如此。

但是，当我同时选中第二个和第四个时，如果取消选中第四个，最大化窗口应使用第二个复选框值显示数据。相反，它只是靠近。

我想知道是否有其他方法可以循环遍历所有复选框，如果有选中或取消选中事件，则执行其他操作。

编辑

function toggleOverlayer(id){
switchAnalytics(id);

if ($("."+id).prop("checked")) {
    showOverlayer(id);
} else {
    hideOverlayer(id);
}

}

    function switchAnalytics(id) {
        switch (id) {
            case 'park_analysis_refined_b_a':
                $("#pg_refined_selection").val("1").change();
                break;
            case 'park_analysis_refined_b_e':
                $("#pg_refined_selection").val("0").change();
                break;
        } }

function selectionPGRefined() {
    var selection = document.getElementById('pg_refined_selection');
    var selectionValues = selection.options[selection.selectedIndex].value;
    displayPGRefinedInfo(selectionValues);
}

/*Displaying results of park greenery refined*/
function displayPGRefinedInfo(values) {
    //alert(values);

    var para = "";
    if (values == "0") {
        para = "<br/>"
        para += "<p style='font-size:4.5em; color:#00297A; font-family:ArialVerdana;'>85.0%</p>";
        para += "<p>of residents live within 400m of park</p>";

    } else if (values == "1") {
        para = "<br/>"
        para += "<p style='font-size:4.5em; color:#00297A; font-family:ArialVerdana;'>90.0%</p>";
        para += "<p>of residents live within 400m of park</p>";
        para += "<p>*incl future DUs</p>"

    }
    document.getElementById('parkGreeneryRefinedBoxContent').innerHTML = para;
}

Answer 1

尝试像这样的委托(delegate):

$( elements ).on( events, selector, data, handler );

尝试这样:

 $( document ).on( "change",'#cb_buffer', function( event ) {
                   if($(this).is(':checked'))
                   {
                       selectionPGRefined();
                       maximisePGRWindow();
                   }
                   else
                   {
                       minimisePGRWindow();
                   }
               });
 $( document).on( "change",'#cb_additionalBuffer', function( event ) {
                   if($(this).is(':checked'))
                   {
                       selectionPGRefined();
                       maximisePGRWindow();
                   }
                   else
                   {
                       minimisePGRWindow();
                   }
               });

api delegate doc sample demo