将下拉jquery筛选器更改为单个复选框
我需要帮助做这个代码将下拉jquery筛选器更改为单个复选框,jquery,checkbox,jquery-filter,Jquery,Checkbox,Jquery Filter,我需要帮助做这个代码 <select id="fruit" class="friltro"> <option value="all">All fruits</option> <option value="apple">apple</option> <option value="orange">orange</option> <option value="pineapple">pinea
<select id="fruit" class="friltro">
<option value="all">All fruits</option>
<option value="apple">apple</option>
<option value="orange">orange</option>
<option value="pineapple">pineapple</option>
</select>
<select id="price" class="friltro">
<option value="all">All prices</option>
<option value="1">$1</option>
<option value="3">$3</option>
<option valenter code hereue="4">$4</option>
</select>
}));
这也是我试图过滤的内容
<div class="item apple 1>
Apple $1
</div>
<div class="item orange 4">
An orange that costs 4 dollars
</div>
id应该是唯一的。请考虑使用“data-”元素作为值。美元符号不是合法的CSS类名。
$('.friltro').change(function () {
var criteria = '';
var showAll = true;
$('.friltro').each(function () {
var val = $(this).children(':selected').val();
if (val !== 'all') {
criteria += '.' + $(this).attr('id') + '-' + val;
showAll = false;
}
});
if (showAll) {
$('.item').show();
} else {
$('.item').hide();
$(criteria).show();
}
<div class="item apple 1>
Apple $1
</div>
<div class="item orange 4">
An orange that costs 4 dollars
</div>