使用复选框过滤到新的对象数组-javascript

Question

我有一个对象数组：

var array = [
    {"date":"Jan 1", "job":"teacher"},
    {"date":"Jan 1", "job":"lawyer"},
    {"date":"Jan 2", "job":"doctor"},
    {"date":"Jan 4", "job":"doctor"}
    ];

我想使用复选框按“作业”进行过滤，然后有一个新的单独对象数组被过滤（保留原始数组不变）。

我希望新数组可以在复选框更改时随时更新。 因此，如果选中“老师”，则只会得到一个新的第一个对象数组。 如果同时选中“律师”和“医生”，则用第二，第三和第四对象的新数组替换该教师数组，依此类推。

这是我的JSFIDDLE 。 我在那些卡住的地方有一些纯文本。

我在想需要一个函数来识别文本框状态的变化并推送到新数组。

function handleChange(){
    if ("checkbox state changes") {
        array.filter(filterByJob);
        newArray.push();
    }       
}

然后另一个函数做过滤。

function filterByJob(obj) {
  if ('job' in obj === "rel, value, id, etc of checked boxes" {
      return true;
  }
}

var newArray = [];

在某些情况下，该数组将具有约20,000个对象。 而且，我需要它具有灵活性以最终解决更多属性。 最终有多个复选框列表，因此可以组合使用多个复选框列表来创建此新阵列。 但这是从现在开始的14个问题:)

我是否可以在任何地方从根本上以正确的方式思考此问题？ 我看了很多例子，但似乎无法拼凑出这种确切的情况。 感谢你给与我的帮助！

Answer 1

您无需测试状态是否更改，因为onchange仅在状态更改时才会触发。 filterByJob只是获取相应的checkbox元素，并测试是否选中了它。

 var array = [ {"date":"Jan 1", "job":"teacher"}, {"date":"Jan 1", "job":"lawyer"}, {"date":"Jan 2", "job":"doctor"}, {"date":"Jan 4", "job":"doctor"} ]; var newArray = array.slice(); showArray(newArray); function showArray(array) { document.getElementById("result").innerHTML = JSON.stringify(array); } function handleChange() { newArray = array.filter(filterByJob); showArray(newArray); } function filterByJob(e) { return document.getElementById(e.job).checked; } 

 <input type="checkbox" onchange="handleChange()" name="Job" rel="teacher" value="teacher" id="teacher" checked>Teacher <input type="checkbox" onchange="handleChange()" name="Job" rel="lawyer" value="lawyer" id="lawyer" checked>Lawyer <input type="checkbox" onchange="handleChange()" name="Job" rel="doctor" value="doctor" id="doctor" checked>Doctor <div id="result"></div>