Jquery - 复选框保持选中 - 简单的过滤系统答案

【问题标题】：Jquery - Checkbox staying checked - simple filter systemJquery - 复选框保持选中 - 简单的过滤系统
【发布时间】：2011-08-08 00:04:47
【问题描述】：

我正在构建一个非常简单的过滤系统，我希望在其中拥有可以显示和隐藏特定类别项目的 html 复选框。

问题是复选框始终处于选中状态。

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 功能，但它没有做任何事情：

Unable to control checkbox checked status - jquery Why won't .attr('checked','checked') set?

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

【问题讨论】：

你确定你正确使用了切换方法吗，我觉得签名很奇怪！
我想知道它是否与此注释有关：“实现还调用事件上的 .preventDefault()”。不知道这会阻止默认状态更改操作，但也许确实如此。我只会使用“更改”而不是切换。

标签： jquery html forms filter checkbox

【解决方案1】：

.toggle() 旨在显示/隐藏相关元素。

这是我的解决方案：http://jsfiddle.net/pBKbz/

【讨论】：

【解决方案2】：

我从不喜欢将removeAttr 与checked 一起使用...尝试忽略它（DEMO）。代码更少。

【讨论】：

【解决方案3】：

这是另一种解决方案，从复选框值中动态获取类别。

http://jsfiddle.net/csaltyj/Jmnwr/17/

【讨论】：

谢谢！动态获取类别绝对有用。

【解决方案4】：

我不完全确定为什么这样做时会出现错误，但是将代码更改为使用“更改”可以解决它..

http://jsfiddle.net/Jmnwr/13/

【讨论】：

【解决方案5】：

它已被preventDefault() 阻止。看看这个：http://jsfiddle.net/q8bAE/5/ 你可以看到第二个复选框正常工作，而第一个在单击时保持初始状态。

似乎preventDefault() 导致复选框更改操作被停止...直到现在我才知道！ toggle() 的文档说“该实现还在事件上调用 .preventDefault()”

【讨论】：

+1 给你，先生。我不知道 toggle() 调用了 preventDefault！