Javascript 多选复选框实现

我试图创建一个复选框菜单，每次选中或取消选中复选框菜单项时，它都会输出一组新的值（用于搜索表）

我可以先检查一个项目，然后让表进行筛选，但之后就不行了

<input type="checkbox" id="cbox1" value="processes" onchange="searchFunction()">
<label for="cbox1">Processes and Roles </label>
</br>
<input type="checkbox" id="cbox2" value="knowledge" onchange="searchFunction()">
<label for="cbox2">Knowledge and Tools </label>


var table = $('#myTable').DataTable();
var searchObject = {};

function searchFunction(id) {
    if (document.getElementById('cbox1').checked) {
        searchObject.termOne = "processes";
    }
    if (document.getElementById('cbox2').checked) {
        searchObject.termTwo = "knowledge";
    }
    table.columns(2).search(searchObject.termOne + '|' + searchObject.termTwo, true, false).draw();
};

过程和角色


知识和工具
var table=$（'#myTable'）.DataTable（）；
var searchObject={}；
函数搜索函数（id）{
if（document.getElementById（'cbox1'）。选中）{
searchObject.termOne=“进程”；
}
if（document.getElementById（'cbox2'）。选中）{
searchObject.termTwo=“知识”；
}
table.columns（2）.search（searchObject.termOne+'|'+searchObject.termTwo，true，false）.draw（）；
};

要处理未选中的情况，可能更容易从空搜索参数开始，然后根据需要添加参数：

function searchFunction(id) {
  var searchParams = {}; //start with empty search params each time
  var cbox1 = document.getElementById('cbox1');
  var cbox2 = document.getElementById('cbox2');

  if (cbox1.checked) {
    searchParams.termOne = "processes";
  }
  if (cbox2.checked) {
    searchParams.termTwo = "knowledge";
  }
  table.columns(2).search(searchParams.termOne + '|' + searchParams.termTwo, true, false).draw();
};

---

当取消选中所有复选框时，添加另一条if语句（如下所示）将返回表中的所有行

function searchFunction(id) {
    var searchParams = {}; //start with empty search params each time
    var cbox1 = document.getElementById('cbox1');
    var cbox2 = document.getElementById('cbox2');
    if (cbox1.checked) {
        searchParams.termOne = "processes";
    }
    if (cbox2.checked) {
        searchParams.termTwo = "knowledge";
    }
    if (cbox1.checked == false && cbox2.checked == false) {
        searchParams.termOne = "processes";
        searchParams.termTwo = "knowledge";
    }
    table.columns(2).search(searchParams.termOne + '|' + searchParams.termTwo, true, false).draw();
};

---

一旦设置了第一、第二项，它们将保持设置状态，除非您重置它们。所以您需要一个'else'子句来将它们设置为“”。非常感谢您，hackerdave！问题一定是我在原始脚本中在searchFunction外部调用了reset。另外，对于其他可能在这里看到hackerdave解决方案的人：searchObject应该是最后一条语句中的searchParams。