Hiya okeis 所以 在这里工作演示 jsfiddle：http://jsfiddle.net/BCreb/87/
说明
首先：您有 2 个具有相同 id 的复选框，这是不正确的 :) 请参阅下面的更新 HTML（在 JQuery 代码之后）。
我不确定你是否可以使用复选框来做到这一点（我可能错了）：read the plugin:（请注意有些人已经编写了解析器，你可以查看它们）但我喜欢表格排序器，插件链接：[链接]应该工作。 https://github.com/jbritten/jquery-tablesorter-filter/blob/master/tablesorter_filter.js ;
&你也可以看看这里好discussion / opinions这里：jQuery table filter with text, checkboxes, selects&你可以看看这个插件：http://datatables.net/;但上述解决方案将为您解决问题。
Below code has filterRow() and ShowAll() function which filter your table data accordingly and display the row:
JQuery 代码
jQuery(document).ready(function() {
$("#myTable").tablesorter({
debug: false,
widgets: ['zebra'],
sortList: [[0, 0]]
}).tablesorterFilter({
filterContainer: $("#filter-box"),
filterClearContainer: $("#filter-clear-button"),
filterColumns: [0],
filterCaseSensitive: false,
callback: function() {
var rowCount = $("#myTable tr:visible").length - 1;
// alert(rowCount);
}
});
$("#check-box, #check-box2").click(function(){
// alert($(this).is(":checked"));
// If both the checkboxes are selected or not selected.
if (($("#check-box").is(":checked") && $("#check-box2").is(":checked")) || (!$("#check-box").is(":checked") && !$("#check-box2").is(":checked")) ) {
showAllRow();
} else if ($("#check-box").is(":checked") ) {
filterRow($("#check-box").val());
} else if ($("#check-box2").is(":checked") ){
filterRow($("#check-box2").val());
}
});
});
function showAllRow() {
$("#myTable").find("tr").each(function(){
$(this).show();
});
}
function filterRow(chckBoxValue) {
$("#myTable").find("tr").each(function(){
var bool = 0; // Identifies if the rows td has that filter or not.
$(this).find("td").each(function(){
if($(this).text() != chckBoxValue) {
bool = 1;
} else {
bool = 0;
return false;
}
});
if (bool == 1) {
$(this).hide();
}else{
$(this).show();
}
});
}
这应该会有所帮助！干杯
HTML
Search: <input name="filter" id="filter-box" value="" maxlength="30" size="30" type="text">
<input id="filter-clear-button" type="submit" value="Clear"/>
<br/>
<input name="filter" id="check-box" type="checkbox" value="Doe"> Doe<br>
<input name="filter" id="check-box2" type="checkbox" value="Smith"> Smith<br>
<table id="myTable">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>http://www.jdoe.com</td>
</tr>
</tbody>
</table>