Question

我正在构建一个非常简单的过滤系统，我想要有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?

任何帮助总是受到赞赏，谢谢！

Answer 1

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

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

Answer 2

我不完全确定为什么在这样做时会出现错误，但更改代码以使用'更改'会修复它..

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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

Jquery - Checkbox保持检查 - 简单的过滤系统

5 个答案: