jQuery, Chrome и флажки.Странное поведение

Question

Я просмотрел сайт и не могу найти ответ на этот вопрос. Не стесняйтесь направить меня к указанному вопросу, если он действительно существует.

В настоящее время я пытаюсь выполнить некоторые операции с флажками на основе дерева, и я столкнулся с некоторым поведением, которое мне кажется странным.

В Google Chrome я обнаружил, что проверка флажка оставляет, если хотите, некоторые «остатки», которые не позволяют мне проверять или снимать флажок с помощью «attrRemove ('флажок»); "

Интересно, что у Internet Explorer (9) есть результат, к которому я стремлюсь. Пожалуйста, посмотрите это jsFiddle в Chrome и IE для хорошего сравнения эффектов.

http://jsfiddle.net/xixionia/9K5ft/

Может кто-нибудь объяснить эти различия, и как я могу установить / снять флажок в chrome, который был проверен «вручную»?

HTML

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

JavaScript

$(':checkbox').click(function(e) {

    if($(this).is(':checked')) {
        $(':checkbox').attr('checked', 'checked');
    } else {
        $(':checkbox').removeAttr('checked');
    }
});

Заранее спасибо за помощь. :)

редактирование:

Мне удалось найти эту работу вокруг. Если у кого-то есть другие решения, пожалуйста, дайте мне знать, и я отмечу это как решение. :)

$(':checkbox').click(function(e) {
    var value = this.checked;
    $(':checkbox').each(function(){ this.checked = value; });
});

редактирование:

Оказывается, эта проблема специфична для jQuery 1.6. Предыдущие версии jQuery не страдают от этой проблемы. Тем не менее, я разместил решение здесь: Установка "флажок" для флажка с jQuery?

Answer 1

При работе с флажками (особенно сложные логические основы на флажках) я всегда стараюсь избегать обработчиков событий jQuery на флажках.В jQuery есть ошибка, связанная с порядком запуска событий при нажатии на флажки и используемый браузер: описание части проблемы можно найти здесь .Цитата:

Кажется, что когда вы запускаете событие click для флажка, поведение по умолчанию (переключение отмеченного атрибута) происходит после срабатывания обработчиков событий.Это противоположно тому, что происходит, когда браузер естественным образом обрабатывает событие щелчка флажка - проверяемый атрибут переключается, а затем выполняются обработчики событий.Это различие в порядке операций между внутренними щелчками и вызовом событий jQuery может вызвать большую проблему, если обработчик событий в любом случае зависит от состояния флажка (который, если у вас есть обработчик щелчка для флажка, означает, что он, вероятно,).

jQuery называет это функцией, потому что она существует с самого начала, и изменение ее на правильное поведение просто убило бы так много существующих приложений.У меня часто возникали проблемы с флажками и «проверялось» только потому, что событие было запущено слишком поздно.Поэтому я просто использую родной способ JS: input.checked.

Answer 2

From: http://api.jquery.com/prop/ вы должны использовать prop вместо attr

Тем не менее, наиболее важная концепция, которую следует помнить о проверенном атрибуте, это то, что он не соответствует свойству проверенного,Атрибут фактически соответствует свойству defaultChecked и должен использоваться только для установки начального значения флажка.Проверенное значение атрибута не изменяется с состоянием флажка, в то время как проверяемое свойство изменяется.

Answer 3

Вместо этого:

$(':checkbox').removeAttr('checked');

Вы должны сделать это:

$(':checkbox').attr('checked', false);

Приветствия

Answer 4

Я столкнулся с той же проблемой и решил, используя следующий код в Chrome.Надеюсь, это поможет.

$("#allchkbox").click(function() {
    if(this.checked) {
        $(".ItemChkbox").each(function() {
            this.checked = true;
        });
    }
    else {
        $(".ItemChkbox").each(function() {
            this.checked = false;
        });
    }
});