複数選択チェックボックスの実装

Question

新しい値のセットを出力するチェックボックスメニューを作成しようとしています（テーブルを検索するため）チェックボックスメニュー項目がチェックされているかチェックされていません。

最初に項目をチェックしたときにフィルタをかけることはできますが、それ以降はできません。

<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

我々がチェックされているケースを処理するために、必要に応じて、その後のparamsを追加し、常に空の検索のparamsを開始する方が簡単かもしれ：

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

として以下の文は、すべての行を返す場合、別の追加すべてのチェックボックスの選択が解除されたときにテーブルに表示されます。

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