多选复选框实现

我在创建一个复选框菜单，输出一组新值（用于搜索表）每次复选框菜单项被选中或未选中。多选复选框实现

我可以在第一次检查项目时获取表格，但以后不会。

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

来源

2017-02-03 Brian Collins

一旦termOne，termTwo被设置，它们将保持设置，除非您重置它们。所以你需要一个'else'子句来将它们设置为“”。 – Shiping

来处理情况，我们选中的情况下，根据需要也可以更容易地始终与空搜索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"; 
    } 
    if (cbox1.checked == false && cbox2.checked == false) { 
     searchParams.termOne = "processes"; 
     searchParams.termTwo = "knowledge"; 
    } 
    table.columns(2).search(searchParams.termOne + '|' + searchParams.termTwo, true, false).draw(); 
};

来源

2017-02-03 00:28:54 hackerrdave

非常感谢你，hackerdave！问题一定是我在原始脚本中调用了searchFunction之外的重置。另外，对于其他可能在这里查看hackerdave解决方案的人：searchObject应该是最后一条语句中的searchParams。 –

啊感谢您的纠正！将更新 – hackerrdave

添加另一个if语句如下返回所有行：

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

来源

2017-02-03 15:37:17

多选复选框实现

回答

相关问题