jQuery Не удалось снять флажки программно - PullRequest
Новая
       40

jQuery Не удалось снять флажки программно

3 голосов
/ 24 апреля 2011

Простая функциональность, я хочу включить / отключить флажки, основанные на изменении флажка верхнего уровня.

Проблема в том, что у обработчиков событий Toggle / Click есть присущие проблемы. Если вы попытаетесь привязать эти обработчики к флажку ввода, проверка флажка по умолчанию не будет выполнена.

Итак, я попытался использовать обработчик изменений одним из двух способов. 

     $('input.all_neighborhoods').change(function(){
    if($(this).not(':checked')){
        $(this).closest('li').siblings('li').find('input[name=neighborhood_id]').attr('checked','checked');
    }
    else{
        $(this).closest('li').siblings('li').find('input[name=neighborhood_id]').removeAttr('checked');
    }

    });

Здесь первое изменение работает так, как вы ожидаете. Все родственные флажки выбраны и проверены. Однако, когда я нажимаю снова, чтобы снять флажок, ничего не происходит. Обработчик событий не работает.

Я тогда попробовал это: 

   $('input.all_neighborhoods').change(function(){
    $(this).attr( 'checked', $(this).is( ':checked' ) ? $(this).closest('li').siblings('li').find('input[name=neighborhood_id]').attr('checked','checked'): $(this).removeAttr('checked').closest('li').siblings('li').find('input[name=neighborhood_id]').removeAttr('checked') );
});

Здесь чекбоксы родного элемента эффективно переключаются. Тем не менее, главный переключатель включения / выключения остается установленным.

Связана ли эта проблема с тем фактом, что все они являются братьями и сестрами, а основной флажок не является родительским?

1 Ответ

5 голосов
/ 24 апреля 2011

(предупреждение, бесстыдная самореклама впереди). Я написал плагин JQuery, который обрабатывает все это беспорядок для вас. Не нужно изобретать велосипед.

Проверьте это: http://mjball.github.com/jQuery-CheckAll/

Если вы хотите придерживаться текущего метода, вот как это исправить: 

$('input.all_neighborhoods').change(function() {
    $(this).closest('li')
        .siblings('li')
        .find('input[name=neighborhood_id]').attr('checked', this.checked);
}

Просто передайте логическое значение .attr(). Кроме того, согласно Когда использовать Vanilla JavaScript против jQuery? не использовать 

$(this).is(':checked')

Вместо этого используйте 

this.checked

Меньше символов для написания, не требуется jQuery и способ более эффективный.

...