Hiya okeis so рабочая демонстрация здесь jsfiddle: http://jsfiddle.net/BCreb/87/
Пояснение
Итак, для начала: у вас есть 2 флажка с одинаковым идентификатором, который не верен :) см. Обновленный HTML ниже (после кода JQuery).
Я не уверен, что вы можете сделать это с помощью флажка (я могу ошибаться): read the plugin: (Обратите внимание, что некоторые парни написали парсер, вы можете проверить их), но мне нравится таблица сортировщика, ссылка на плагин: [ссылка] должна Работа. https://github.com/jbritten/jquery-tablesorter-filter/blob/master/tablesorter_filter.js;
& Вы также можете посмотреть здесь хорошо discussion / opinions здесь: jQuery табличный фильтр с текстом, флажки, выбирает & вы можете посмотреть в этот плагин: 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>