时间戳

首页 > 解决方案 > html复选框取消单击隐藏函数变量

javascript - html复选框取消单击隐藏函数变量

问题描述

我有使用标签创建的复选框：

<label><input type="checkbox" />ATL6101</label><br>
<label><input type="checkbox" />ATL6102</label><br>
<label><input type="checkbox" />ATL6103</label><br>
<label><input type="checkbox" />ATL6104</label><br>
<label><input type="checkbox" />ATL6105</label><br>

这对应于函数变量。

Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {


    getRoute('4200 N COMMERCE DR,30344-5707', '822 RALPH MCGILL BLVD NE,30306', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Green', 'ATL6101');

    getRoute('4200 N COMMERCE DR,30344-5707', '4575 WEBB BRIDGE RD,30005', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Lime', 'ATL6102');

    getRoute('4200 N COMMERCE DR,30344-5707', '520 W PONCE DE LEON AVE,30030', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Maroon', 'ATL6103');

    getRoute('4200 N COMMERCE DR,30344-5707', '575 OLYMPIC DR,30601', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Navy', 'ATL6104');

    getRoute('4200 N COMMERCE DR,30344-5707', '3470 MCCLURE BRIDGE RD,30096', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Lime', 'ATL6105');




});

我怎么能说如果未单击复选框忽略函数变量？有没有办法可以替换函数中的值并动态创建复选框？

标签： javascripthtmlfunctioncheckbox

解决方案

如果我理解正确，您希望动态生成复选框并调用一个函数，具体取决于是否选中了相应的复选框。

为此，您需要有两个变量。

  • routes一个包含所有路由和相关参数的对象。该对象将用于创建复选框。
  • selectedRoutes包含当前选定路线名称的数组。这将用于仅调用getRoute选定的路由。

要创建复选框，您可以使用createElement和appendChild。请按照 MDN 链接了解有关此的更多信息，或查看下面的示例。

您需要确保捕获click每个复选框上的事件，以便能够将selectedRoutes变量与用户选择的内容同步。这只需检查复选框checked属性并将复选框属性添加/删除value到selectedRoutes.

这样，您就可以在数组中包含当前选择的值。要使用它，您可以拥有一个按钮，并捕获click事件。在事件中，您只需要通过在数组routes上搜索来检查选择了哪些元素。selectedRoutes如果它们被选中，则getRoute使用该路由的参数调用该函数。

const content = document.getElementById('content');
const routes = {
  'ATL6101': ['4200 N COMMERCE DR,30344-5707','822 RALPH MCGILL BLVD NE,30306','','','','','','','','','','','','','','','Green'],
  'ATL6102': ['4200 N COMMERCE DR,30344-5707','4575 WEBB BRIDGE RD,30005','','','','','','','','','','','','','','','Lime'],
  'ATL6103': ['4200 N COMMERCE DR,30344-5707','520 W PONCE DE LEON AVE,30030','','','','','','','','','','','','','','','Maroon'],
  'ATL6104': ['4200 N COMMERCE DR,30344-5707','575 OLYMPIC DR,30601','','','','','','','','','','','','','','','Navy'],
  'ATL6105': ['4200 N COMMERCE DR,30344-5707','3470 MCCLURE BRIDGE RD,30096','','','','','','','','','','','','','','','Lime'],
};
let selectedRoutes = [];

for (routeValue in routes) {
  const label = document.createElement('label');
  const input = document.createElement('input');
  const text = document.createTextNode(routeValue);
  input.type = 'checkbox';
  input.value = routeValue;
  input.addEventListener('click', e => {
    if (e.target.checked) {
      selectedRoutes.push(e.target.value);
    } else {
      selectedRoutes.splice(selectedRoutes.indexOf(e.target.value), 1);
    }
  });
  label.appendChild(input);
  label.appendChild(text);
  content.appendChild(label);
};

document.getElementById('action').addEventListener('click', _ => {
  Microsoft.Maps.loadModule('Microsoft.Maps.Directions', _ => {
    for (routeValue in routes) {
      // routeValue is not in selectedRoutes, ie route not selected by user
      if (!selectedRoutes.includes(routeValue)) continue;
      // add the original route name back in params
      const params = routes[routeValue].concat(routeValue);
      // actually call getRoute
      getRoute.apply(this, params);
    }
  });
});


// mocked implementations
const getRoute = console.log;
const Microsoft = {Maps: {loadModule: (x, y) => y()} };
<div id="content"></div>
<button id="action">Click me</button>

推荐阅读