大佬教程收集整理的这篇文章主要介绍了jquery – 带复选框的过滤表，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
如果他们满足所有检查,我希望它过滤结果,而不是一个.
我的Example
$("input[name='filterStatus'],SELEct.filter").change(function() {
var classes = [];
var stateClass = ""
$("input[name='filterStatus']").each(function() {
if ($(this).is(":checked")) {
classes.push('.' + $(this).val());
}
});
if (classes == "" && stateClass == "") {
// if no filters SELEcted,show all items
$("#StatusTable tbody tr").show();
} else {
// otherwise,hide everything...
$("#StatusTable tbody tr").hide();
// then show only the matching items
rows = $("#StatusTable tr" + stateClass).filter(classes.length ? classes.join(',') : '*');
if (rows.size() > 0) {
rows.show();
}
}
});
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> </head> <body> <form name="FilterForm" id="FilterForm" action="" method=""> <input type="checkBox" name="filterStatus" value="ISO " /> <label for="filter_1">ISO</label> <input type="checkBox" name="filterStatus" value="AMCA" /> <label for="filter_2">AMCA</label> <input type="checkBox" name="filterStatus" value="UL" /> <label for="filter_3">UL</label> </form> <table border="1" id="StatusTable"> <thead> <tr> <th>Name</th> <th>ISO</th> <th>AMCA</th> <th>UL</th> </tr> <tbody> <tr class="ISO"> <td class="Name">Name1</td> <td class="ISO">✓</td> <td class="AMCA"> </td> <td class="UL"> </td> </tr> <tr class="ISO AMCA"> <td class="Name">Name2</td> <td class="ISO">✓</td> <td class="AMCA">✓</td> <td class="UL"> </td> </tr> <tr class="ISO AMCA UL"> <td class="Name">Name3</td> <td class="ISO">✓</td> <td class="AMCA">✓</td> <td class="UL">✓</td> </tr> </tbody> </table> <script></script> </body> </html>
现在,当您循环遍历每一行时,您还将遍历要检查的每个类.如果在任何时候,循环测试失败,请将show变量设置为false以隐藏行.
$("input[name='filterStatus']").change(function () {
var classes = [];
$("input[name='filterStatus']").each(function () {
if ($(this).is(":checked")) { classes.push('.' + $(this).val()); }
});
if (classes == "") { // if no filters SELEcted,show all items
$("#StatusTable tbody tr").show();
} else { // otherwise,hide everything...
$("#StatusTable tbody tr").hide();
$("#StatusTable tr").each(function () {
var show = true;
var row = $(this);
classes.forEach(function (className) {
if (row.find('td' + className).html() == ' ') { show = false; }
});
if (show) { row.show(); }
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> </head> <body> <form name="FilterForm" id="FilterForm" action="" method=""> <input type="checkBox" name="filterStatus" value="ISO " /> <label for="filter_1">ISO</label> <input type="checkBox" name="filterStatus" value="AMCA" /> <label for="filter_2">AMCA</label> <input type="checkBox" name="filterStatus" value="UL" /> <label for="filter_3">UL</label> </form> <table border="1" id="StatusTable"> <thead> <tr> <th>Name</th> <th>ISO</th> <th>AMCA</th> <th>UL</th> </tr> <tbody> <tr class="ISO"> <td class="Name">Name1</td> <td class="ISO">✓</td> <td class="AMCA"> </td> <td class="UL"> </td> </tr> <tr class="ISO AMCA"> <td class="Name">Name2</td> <td class="ISO">✓</td> <td class="AMCA">✓</td> <td class="UL"> </td> </tr> <tr class="ISO AMCA UL"> <td class="Name">Name3</td> <td class="ISO">✓</td> <td class="AMCA">✓</td> <td class="UL">✓</td> </tr> </tbody> </table> <script></script> </body> </html>
以上是大佬教程为你收集整理的jquery – 带复选框的过滤表全部内容，希望文章能够帮你解决jquery – 带复选框的过滤表所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。