Jquery - 复选框保持检查 - 简单的过滤系统 [英] Jquery - Checkbox staying checked - simple filter system

问题描述

我建立了一个非常简单的过滤器系统，其中我想有一个html复选框，可以显示和隐藏特定类别的项目。

I am building a very simple filter system where I want to have html checkboxes that can show and hide items of particular categories.

问题是，无论是什么。

在jsfiddle上的示例： http：// jsfiddle.net/Jmnwr/

Example on jsfiddle: http://jsfiddle.net/Jmnwr/

HTML：

<ul id="filters">
    <li><input type="checkbox" checked="checked" value="categorya" id="filter-categorya" /><label for="filter-categorya">Category A</label></li>
    <li><input type="checkbox" checked="checked" value="categoryb" id="filter-categoryb" /><label for="filter-categoryb">Category B</label></li>
</ul>

<div class="categorya"></div>
<div class="categorya"></div>
<div class="categorya"></div>
<div class="categorya"></div>
<div class="categoryb"></div>
<div class="categoryb"></div>
<div class="categoryb"></div>

JS：

$("#filter-categorya").toggle(
function() {
    $('.categorya').stop().fadeTo('slow', 0.2);
    $('#filter-categorya').removeAttr('checked');
}, function() {
    $('.categorya').stop().fadeTo('slow', 1.0);
    $('#filter-categorya').attr('checked', 'checked');
});

$("#filter-categoryb").toggle(
function() {
    $('.categoryb').stop().fadeTo('slow', 0.2);
    $('#filter-categoryb').removeAttr('checked');
}, function() {
    $('.categoryb').stop().fadeTo('slow', 1.0);
    $('#filter-categoryb').attr('checked', 'checked');
});

我已经看到两个关于这个主题的帖子，但不知道他们是完全相关的，为什么我的代码特别不工作。我也尝试使用preventdefault函数，但它没有做任何事情：

I have seen two posts regarding this topic but not sure if they are entirely related or why my code in particular is not working. I've also tried using the preventdefault function but it didn't do anything:

无法控制复选框已选状态 - jquery
http://stackoverflow.com/questions/2596854/why-wont-attrchecked-checked-

Unable to control checkbox checked status - jquery http://stackoverflow.com/questions/2596854/why-wont-attrchecked-checked-set

任何帮助总是感激，
谢谢！

Any help always appreciated, Thanks!

推荐答案

p>它被 preventDefault（）阻止。看看这个： http://jsfiddle.net/q8bAE/5/ 您可以看到第2个复选框功能正常

It's being blocked by preventDefault(). Take a look at this: http://jsfiddle.net/q8bAE/5/ You can see that the 2nd checkbox functions normally, while the first remains in its initial state when clicked.

似乎 preventDefault（）会导致复选框更改操作被停止...我直到现在才知道！ toggle（）的文档说实现也调用事件

It appears that preventDefault() causes checkbox change actions to be stopped... which I didn't know until right now! The docs for toggle() say "the implementation also calls .preventDefault() on the event"

这篇关于Jquery - 复选框保持检查 - 简单的过滤系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！