文章/答案/技术大牛

发布

问复选框触发事件
EN

Stack Overflow用户

提问于 2014-05-09 06:29:33

回答 2查看 792关注 0票数 1

我在复选框触发器事件上有一些问题。下面是我如何设置复选框：

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方法。第四种情况也是如此。

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

我想知道有什么替代的方法可以让我在所有的复选框中循环，如果有选中或取消选中的事件，那么执行其他的操作。

编辑

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;
}

javascript

jquery

checkbox

回答 2

Stack Overflow用户

发布于 2014-05-09 06:37:10

好吧，我会尽力解决的。做非常简单的事情有很多代码，但我知道可能有其他函数依赖于这段代码。

首先，由于您已经在使用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();
    }
}

如果这对你有用的话请告诉我。

票数 0

Stack Overflow用户

发布于 2014-05-09 06:40:34

用户多个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();
      }

 });

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23557984

复制

相似问题

问复选框触发事件
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问复选框触发事件EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问复选框触发事件
EN