Multi-Auswahl Checkbox Implementierung

Question

Ich versuche ein Checkbox-Menü zu erstellen, das einen NEUEN Satz von Werten ausgibt (zum Suchen einer Tabelle) JEDES Mal, wenn ein Checkbox-Menü ausgewählt oder deaktiviert ist.

Ich kann die Tabelle zu filtern bei der ersten Überprüfung eines Artikels, aber nicht danach.

<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(); 
}; 

Answer 1

den Fall zu behandeln, in denen wir nicht markiert sind, kann es einfacher sein, immer mit leeren Suche params zu starten, dann params nach Bedarf hinzufügen:

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(); 
}; 

Answer 2

eine weitere if-Anweisung hinzufügen, wie unten gibt alle Zeilen in der Tabelle, wenn alle Kontrollkästchen deaktiviert sind.

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(); 
};