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>"

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

//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方法。第四个也是如此。

但是，当我同时检查第二个，并且如果我取消选中第四个，则maximWindow应该使用第二个复选框值来显示数据。相反，它只是关闭。

我想知道是否有任何替代方法可以循环访问所有复选框，如果有检查或取消选中事件，则执行其他操作。

修改

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

好的，我会尝试解决问题。有很多代码可用于执行非常简单的操作，但我知道根据此代码可能还有其他函数。

首先，由于您已经在使用jQuery事件，因此最好不要将其与标记中的onclick属性混合使用，所以让我们删除它并仅使用jQuery：

var content = "<table class=\"filter-table\">";
            content += "<tr><td><label><input  class=\"park_analysis_refined_e\"  type=\"checkbox\" 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\" >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\">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\">DMP2013 Additional Parks Buffer</label></td></tr>" +
                   "<tr><td><div id=\"park_analysis_refined_b_a\"></div></td></tr>";

            content += "</table>"

接下来，如果您使用change事件代替click，可能会更好。我将更新函数以处理所有复选框，而不仅仅是第二个和第四个，如上所述。先前从onclick标记属性执行的代码将在此处理程序中移动。其次，你应该合并这两个事件，因为它们基本上做了同样的事情，所以尽量避免不必要的代码重复。第三，在事件处理程序中，您应该检查是否选中了其中一个复选框，而不仅仅是当前复选框。这是代码：

$("input:checkbox").on("change", function (event) {
    toggleOverlayer($(this).prop('id'));

    if ($('#cb_buffer').is(':checked') || $('#cb_additionalBuffer').is(':checked')) {
        selectionPGRefined();
        maximisePGRWindow();
    }
    else {
        minimisePGRWindow();
    }
});

最后，让我们更改switchAnalytics函数以实现关于将值设置为0或1的逻辑：

function switchAnalytics(id) {
    var id_a = "park_analysis_refined_b_a";
    var id_e = "park_analysis_refined_b_e";
    var isChecked_a = $("#" + id_a).is(":checked");
    var isChecked_e = $("#" + id_e).is(":checked");

    if (id == id_a || id == id_e) {
        var newValue = "";
        if (isChecked_a && isChecked_e)
            newValue = id == id_a ? "1" : "0";
        else if (isChecked_a)
            newValue = "1";
        else if (isChecked_e)
            newValue = "0";

        $("#pg_refined_selection").val(newValue).change();
    }
}

请告诉我这是否适合您。

Answer 2

尝试这样的委托：

$( 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

Answer 3

用户多个jQuery选择器，如下所示

$( "#cb_buffer, #cb_additionalBuffer" ).on( "click", function( event ) {
  // here check if any of the checkbox is already checked then don't do any action
   var cb_buffer_checked = $("#cb_buffer").is(':checked');
   var cb_additionalBuffer_checked = $("#cb_additionalBuffer").is(':checked');

      // if checkbox unchecked then update option for other checked checkbox
      if(!$(this).is(':checked');)
      {
      // set option for checked checkbox
      if(cb_additionalBuffer_checked)
        switchAnalytics($("#cb_additionalBuffer").attr('id'));

      if(cb_buffer_checked )
        switchAnalytics($("#cb_buffer").attr('id'));
      }

      if(cb_buffer_checked || cb_additionalBuffer_checked)
      {
        selectionPGRefined();
        maximisePGRWindow();            
      }
      else
      {
       minimisePGRWindow();
      }

 });

复选框触发事件

3 个答案: