JS 处理后台数据

Question

后台获取到的ajax的JSON数组，原始数据
[
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "320", "FromStation": "武汉"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "320", "FromStation": "武汉"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "320", "FromStation": "武汉"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "南京"}
]

前端页面效果

页面上三个input是多选。
比如 第一次点南京
把FromStation为北京的数据晒出来后生成新的数据
[
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "336", "FromStation": "南京"}
]

第二次点击选中上海
[
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "336", "FromStation": "上海"}
{"CostTime": "336", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "上海"}
]

取消反之。
之前我使用
var arr = result.filter(function (result) {

   return result.TrainType === "南京";

});
可以单一筛选出南京的数据，我写了个方法，如下:

function filterKey(key) {

return result.filter(function (item) {

return item.FromStation === key;
})
}

但是这个方法对多个选择的input不对。

用JS或者JQ过滤具体方式是怎么样的。谢谢各位大牛指点下！

Answer 1

 <input type="checkbox" data-name="上海" >上海
    <input type="checkbox" data-name="南京" >南京
    <input type="checkbox" data-name="武汉" >武汉
    
         var arr = [
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "320", "FromStation": "武汉"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "320", "FromStation": "武汉"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "320", "FromStation": "武汉"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "南京"}
];
var checks = document.querySelectorAll('input[type=checkbox]');


checks.forEach(function(){
    this.onchange = function(){
        var myarr = [];
        checks.forEach(function(el){
                if(el.checked){
                    myarr.push(el.getAttribute('data-name'));
                };
        });
        
        console.log(filterKey(myarr));
    }
});
function filterKey(myarr) {
    var checkarr = [];
    for(var i in myarr){
        checkarr = checkarr.concat(arr.filter(function(item){
            return item.FromStation === myarr[i];
        }))
    }
    return checkarr;
}