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

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

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

В Google Chrome я обнаружил, что при проверке флажка появляется некоторый "остаток", если вы это сделаете, это не позволит мне проверить или снять этот флажок, используя "attrRemove (" checked ");"

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

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

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

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 не страдают от этой проблемы. Тем не менее, я опубликовал решение здесь: Настройка "checked" для флажка с jQuery?

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

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

Приветствия

Ответ 4

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

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