我有一个供公司使用的模板，我不擅长编码，并从其他开发人员那里获取所有代码。
我正在使用https://www.w3schools.com/bootstrap/bootstrap_filters.asp中的BS过滤器
我正在尝试使用复选框设计进行相同的过滤器，但我不知道如何修改此。在此javascript中，并尝试将标签内的值带入过滤器中，但是要过滤功能。
寻找一些可能且容易的帮助。
谢谢您的帮助。
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
$(document).ready(function() {
$('.dropdown-menu li label').on("click", function() {
var value = $(this).find('.checkbox').val();
$(".myTable").filter(function() {
$(this).toggle($(this).text().toUpperCase().indexOf(value) > -1)
});
});
});
$(function() {
$('.dropdown-menu li').on('click', function(event) {
var $checkbox = $(this).find('.checkbox');
if (!$checkbox.length) {
return;
}
var $input = $checkbox.find('input');
var $icon = $checkbox.find('span.glyphicon');
if ($input.is(':checked')) {
$input.prop('checked', false);
$icon.removeClass('glyphicon-check').addClass('glyphicon-unchecked')
} else {
$input.prop('checked', true);
$icon.removeClass('glyphicon-unchecked').addClass('glyphicon-check')
}
return false;
});
});.dropdown-menu>li>.dropdown-menu-item {
clear: both;
color: #333;
display: block;
padding: 3px 20px;
white-space: nowrap;
margin: 5px 0;
width: 100%;
text-align: left;
text-decoration: none;
outline: none;
cursor: pointer;
-moz-user-select: none;
user-select: none;
}
.dropdown-menu>li:hover .dropdown-menu-item,
.dropdown-menu>li:focus .dropdown-menu-item {
background-color: #f5f5f5;
color: #262625;
}
.dropdown-menu>li>.dropdown-menu-item.checkbox {
margin: 0;
font-weight: normal;
}
.dropdown-menu>li>.dropdown-menu-item.checkbox input {
display: none;
}
.dropdown-menu {
min-width: 500px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>
<body>
<div class="container">
<h2>Filterable Table</h2>
<div class="btn-group" style="margin-left: 20px">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="glyphicon"><img src="css/color-palette.png"/> </span> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li style="display:inline-block; width:150px;"><label value="A.FUSYA" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
A.FUSYA
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="A.GRI" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
A.GRI
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="A.KAHVE" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
A.KAHVE
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="A.LACIVERT" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
A.LACIVERT
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="A.MAVI" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
A.MAVI
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="A.MOR" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
A.MOR
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="ANTRASIT" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
ANTRASIT
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="BEBE-MAVI" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
BEBE-MAVI
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="BEJ" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
BEJ
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="BEYAZ" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
BEYAZ
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="BORDO" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
BORDO
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="COK-RENKLI" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
COK-RENKLI
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="DESENLI" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
DESENLI
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="EKRU" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
EKRU
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="FISTIK-YESIL" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
FISTIK-YESIL
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="FUSYA" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
FUSYA
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="GEO" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
GEO
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="GOLD" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
GOLD
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="GRI" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
GRI
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="GUMUS" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
GUMUS
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="HAKI" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
HAKI
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="HARDAL" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
HARDAL
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="INDIGO" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
INDIGO
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="K.GRI" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
K.GRI
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="K.LACIVERT" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
K.LACIVERT
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="K.MOR" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
K.MOR
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="K.YESIL" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
K.YESIL
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="KAHVE" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
KAHVE
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="KIREMIT" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
KIREMIT
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="KIRMIZI" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
KIRMIZI
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="LACIVERT" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
LACIVERT
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="LILA" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
LILA
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="LINE" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
LINE
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="LOTUS" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
LOTUS
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="MARBEL" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
MARBEL
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="MAVI" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
MAVI
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="MIDYE" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
MIDYE
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="MINT-YESIL" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
MINT-YESIL
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="MOR" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
MOR
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="MURDUM" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
MURDUM
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="NAR-CICEGI" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
NAR-CICEGI
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="NEON-ORANJ" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
NEON-ORANJ
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="NEON-PEMBE" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
NEON-PEMBE
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="NEON-SARI" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
NEON-SARI
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="NEON-YESIL" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
NEON-YESIL
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="NUDE" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
NUDE
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="ORANJ" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
ORANJ
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="PEMBE" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
PEMBE
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="PETROL" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
PETROL
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="PUDRA" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
PUDRA
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="RAINBOW" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
RAINBOW
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="SARI" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
SARI
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="SAX" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
SAX
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="SIYAH" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
SIYAH
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="SOMON" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
SOMON
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="TEN" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
TEN
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="TROPIK" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
TROPIK
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="TURKUAZ" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
TURKUAZ
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="TURUNCU" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
TURUNCU
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="VISNE" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
VISNE
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="YESIL" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
YESIL
</label>
</li>
<li style="display:inline-block; width:150px;"><label value="ZEBRA" class="dropdown-menu-item checkbox"><input type="checkbox">
<span class="glyphicon glyphicon-unchecked"></span>
ZEBRA
</label>
</li>
</ul>
</div>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r@test.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</body>
</html>