Jquery - флажок остается установленным - простая система фильтрации

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');
});

Я видел два сообщения по этой теме, но не уверен, что они полностью связаны или почему мой код, в частности, не работает. Я также пытался использовать функцию предотвращать ошибки, но она ничего не делала:

Невозможно контролировать статус флажка - jquery Почему .attr («проверено», «проверено») не установлено?

Любая помощь всегда ценится, Спасибо!

Answer 1

Он заблокирован preventDefault().Взгляните на это: http://jsfiddle.net/q8bAE/5/ Вы можете видеть, что второй флажок работает нормально, в то время как первый остается в исходном состоянии при щелчке.быть остановленным ... чего я не знал до сих пор!Документы для toggle() говорят, что "реализация также вызывает .preventDefault () для события"

Answer 2

Я не совсем уверен, почему вы получаете ошибку, когда делаете это таким образом, но изменение кода для использования 'change' исправляет это ..

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

Answer 3

.toggle() предназначен для отображения / скрытия рассматриваемого элемента.

Вот мое решение: http://jsfiddle.net/pBKbz/

Answer 4

Мне никогда не нравилось использовать removeAttr с checked ... попробуйте пропустить это ( DEMO ).Это даже меньше кода.

Answer 5

Вот еще одно решение, динамически выбирающее категорию из значения флажка.

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