Jquery复选框过滤器
Jquery check box filter
我正在尝试根据某些复选框是否被选中来过滤列表项。
我已经设法让过滤工作,但我正在努力删除页面加载时的所有列表项。
这个想法是让'list items'不显示,直到'options'复选框被选中
我已经把我的工作版本放在网上http://dev.perfectdaycanada.com/filter/
提前感谢任何可以帮助我的人,这是非常感激的。
用于过滤的javascript:
$(document).ready(function(){
$("input.type_check").attr("checked", "").click(function() {
if($(this).is(':checked')) {
$("#case-studies li."+$(this).attr('id')).removeClass('type_hidden');
$("#case-studies li").not(".type_hidden, .start_hidden").slideDown();
} else {
$("#case-studies li."+$(this).attr('id')).addClass('type_hidden');
$("#case-studies li."+$(this).attr('id')).slideUp();
}
});
$("input.start_check").attr("checked", "").click(function() {
if($(this).is(':checked')) {
$("#case-studies li."+$(this).attr('id')).removeClass('start_hidden');
$("#case-studies li").not(".type_hidden, .start_hidden").slideDown();
} else {
$("#case-studies li."+$(this).attr('id')).addClass('start_hidden');
$("#case-studies li."+$(this).attr('id')).slideUp();
}
});
});
HTML:
<div>
<input name="action-areas[]" type="checkbox" id="areas_crop_initiatives" value="0" class="type_check" checked="checked" />
<label for="areas_crop_initiatives">Crop initiatives</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_managment" value="1" class="type_check" checked="checked" />
<label for="areas_managment">Management</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_assurance" value="2" class="type_check" checked="checked" />
<label for="areas_assurance">Assurance/certification</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_environmental" value="3" class="type_check" checked="checked" />
<label for="areas_environmental">Environmental management</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_biodiversity" value="4" class="type_check" checked="checked" />
<label for="areas_biodiversity">Biodiversity</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_staff" value="5" class="type_check" checked="checked" />
<label for="areas_staff">Staff</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_community" value="6" class="type_check" checked="checked" />
<label for="areas_community">Community</label>
</div>
<ul id="case-studies">
<li id="event_1768" class="ethics_agrochemical_usage ethics_input_costs farms_potatoes areas_crop_initiatives">– Potatoes, Poland</li>
<li id="event_2190" class="ethics_hcvl farms_beef areas_community areas_managment countries_austria">– Beef, Ireland</li>
<li id="event_2191" class="ethics_air_emissions farms_tomatoes areas_assurance countries_austria">– Tomatoes, Portugal</li>
</ul>
将type_hidden
类添加到您的列表项中,如下所示:
<li id="event_1768" class="other classes type_hidden">– Potatoes, Poland</li>
相关文章:
- 角度嵌套过滤器依据复选框
- AngularJS过滤器使用ng个重复复选框显示所有页面加载
- 在同位素.js中加入多个复选框过滤器
- PHP-AJAX复选框过滤器使用数据标记属性
- 如何在 emberjs 中使用复选框实现多个过滤器
- Angular/Ionic/Javascript:无法让下拉过滤器作为复选框工作
- 带有群集和过滤器复选框的地图框个性化图标
- 角度ng重复过滤器在搜索后取消选中所有复选框
- 带有复选框和滑块过滤器的jQuery同位素
- 带有复选框的 JavaScript 过滤器
- 复选框在应用 AngularJS 过滤器后取消选中自身
- 为复选框列表 - 动态响应列表创建一个过滤器搜索框
- 剑道网格预过滤器与多个复选框
- 角度过滤器 ng 重复子阵列的复选框
- 带有复选框AND searchbox-javascript的引导程序表过滤器
- 如何将过滤器添加到我的表中,以允许选择多个复选框,以及从下拉列表中进行过滤
- 用于ng模型Angular中复选框的布尔过滤器
- 取消选中ExtJS Grid Filter复选框并不会删除过滤器
- Google Maps API v3复选框/过滤器数据库
- JQuery过滤器复选框显示/隐藏元素