Javascript 将多个值附加到单个div

我使用以下mapbox.js从geojson文件中过滤功能。这个例子是不言自明的——第一步是找到所有选中的复选框，并建立它们的值列表

目前，复选框值都是单个字符串。我的问题很简单，复选框中的

value

是否可以是整数数组（或字符串数组？），如果可以，如何将整数数组附加到

div输入中的
value
，以便可以一次按多个值过滤

for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) on.push(checkboxes[i].value);

<div id='filters' class='ui-select'>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='fast-food' value='fast-food'/><label for='fast-food'>fast-food</label></div>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='bicycle' value='bicycle'/><label for='bicycle'>bicycle</label></div>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='bar' value='bar'/><label for='bar'>bar</label></div>
</div>
<div id='map'></div>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpazE3MTJldjAzYzZ1Nm0wdXZnMGU2MGMifQ.i3E1_b9QXJS8xXuPy3OTcg';
var map = L.mapbox.map('map', 'mapbox.dc-markers');
var filters = document.getElementById('filters');
var checkboxes = document.getElementsByClassName('filter');

function change() {
    // Find all checkboxes that are checked and build a list of their values
    var on = [];
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) on.push(checkboxes[i].value);
    }
    // The filter function takes a GeoJSON feature object
    // and returns true to show it or false to hide it.
    map.featureLayer.setFilter(function (f) {
        // check each marker's symbol to see if its value is in the list
        // of symbols that should be on, stored in the 'on' array
        return on.indexOf(f.properties['marker-symbol']) !== -1;
    });
    return false;
}

// When the form is touched, re-filter markers
filters.onchange = change;
// Initially filter the markers
change();
</script>

for（变量i=0；i
您可以利用jQuery，它允许您为DOM上的元素分配属性名称和值。您可以将数据元素的值设置为逗号分隔的整数列表，这些整数可以解析为自己的数组

一些（未经测试的）伪代码作为示例：

<div id='filters' class='ui-select'>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='fast-food' value='fast-food' data-filter='fast-food,restaurants'/><label for='fast-food'>fast-food</label></div>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='bicycle' value='bicycle'/><label for='bicycle' data-filter='bicycle, transportation'>bicycle</label></div>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='bar' value='bar' data-filter='bar, restaurants'/><label for='bar'>bar</label></div>
</div>

...

function change() {
    // Find all checkboxes that are checked and build a list of their values
    var on = [];
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
          var array = $(checkboxes[i]).data("filter").split(',');
          Array.prototype.push.apply(on,array);
        }
    }

    ...
}


快餐
自行车
酒吧
...
函数更改（）{
//查找所有选中的复选框并生成其值的列表
var on=[]；
对于（变量i=0；i