Вложенные "выбрать все" галочки


Так после ответа на вопрос о вложенных связаны галочки , я упомянул об этом на работе и на удивление он оказался похож на то, что нам нужно.

Требования были:

  1. кнопка "выделить все" флажок
  2. вложенная "выделить все" флажок (выбирает только малую часть)
  3. Нельзя полагаться на иерархию разметки. Данная скрипка является лишь примером. Редактировать:- из беседы с Джоном я теперь вижу, было это требование и поэтому я добавил его.

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

(function($) {
    $('input[type=checkbox][data-children]').unbind("change childchange childchangebubble").each(function() {
        var parent = $(this);

        var linkedChildren = $(parent.data("children"));

        //trigger a "childChange" event on the parent when any child is triggered.
        linkedChildren.bind("change childchangebubble", function() {
            parent.trigger("childchange");
        });

        parent.bind({
            "change": function(event) { // Bind change event to check all children
                linkedChildren.prop("checked", parent.prop("checked")).trigger("change");
            },
            "childchange": function() { // have to bind custom event seperately, there seems to be a jQuery bug.
                // When a child is changed recalculate if parent should be checked
                var noChildrenUnchecked = !linkedChildren.is(":not(:checked)");
                parent.prop("checked", noChildrenUnchecked).trigger("childchangebubble");
            }
        });
    });
})(jQuery);

с данными детьми атрибуты, которые отображаются на страницу выглядеть так: данные-дети="#child2sub1, #child2sub2" на родителей и ничего лишнего нужен на детей.

Я люблю любые отзывы на читаемость/ремонтопригодность, производительность и т. д.

текущая jsFiddle.



4990
5
задан 22 сентября 2011 в 03:09 Источник Поделиться
Комментарии
2 ответа

Некоторые небольшие изменения:


  1. Изменить вход[тип=галочка] , чтобы :флажок. Не исключением
    сделать вещи выглядят чище.

  2. Похоже, вы используете данные-детей стоимость как jQuery
    селекторы и используя все те личности. если вы хотите сократить это ты
    можно добавить определенный класс CSS на них и положить, что значение
    данных детей. Ваш код будет работать и разметка будет
    вероятно, будет короче.

  3. Также вы должны быть осторожны, так как ваш код отвязывается “изменить”, что может
    уберите события из других код jQuery и это, вероятно, сломать
    он.

1
ответ дан 29 сентября 2011 в 02:09 Источник Поделиться

У меня есть предложение. В принципе я не уверен, почему вы добавляете столько в HTML, чтобы справиться с головной и флажки ребенка. Не иерархия достаточно HTML, чтобы идти дальше? С HTML, вы уже сможете определить родительские и дочерние отношения. Вдобавок, почему вызвать больше событий. Просто обрабатывать событие, как пузыри на дом.

Ниже приведен пример кода, который я считаю гораздо более многоразовые и гораздо легче реализовать. Кроме того, я изменил эту работу с будущими флажки добавлен в DOM. Это может быть необходимо для загрузки некоторых детей через AJAX и/или добавления в DOM, поэтому ваш способ может потребовать от вас, чтобы привязать функцию на каждом добавляться в дом, где, как я бы справиться с этим, хотя делегирования событий.

$.fn.nestedCheckboxes = function (stopPropogation) {
this.addClass('nestedCheckboxes');
this.click(nestedCheckboxHandler);
this.delegate(':has( > input:checkbox)', 'click', nestedCheckboxHandler);
function nestedCheckboxHandler (evt) {
if ($(evt.target).is("input:checkbox")) {
var parentContainer = $(this);
var checkbox = parentContainer
.find(' > input:checkbox:eq(0)');
var parentCheckbox = parentContainer
.parent()
.closest(':has( > input:checkbox)')
.children('input:checkbox');

if (evt.target == checkbox[0]) {
$('input:checkbox', parentContainer)
.prop("checked", checkbox.prop("checked"));
}
var parentCheckboxValue = !parentCheckbox
.parent()
.find("input:checkbox")
.not(parentCheckbox[0])
.is("input:checkbox:not(:checked)");

parentCheckbox.prop("checked",parentCheckboxValue);
} else if (stopPropogation) {
evt.stopPropagation();
}
};
};

$(function () {
$('div').nestedCheckboxes(); //this is how you would use the function

$('#addChildren').click(function () {
$(this).after('<ul><li><input type="checkbox" /><label>Child 2 SubChild 1</label></li><li><input type="checkbox" /><label>Child 2 SubChild2</label></li></ul>');
return false;
});

});

Кроме того, я добавил опцию для nestedCheckboxes в stopPropogation если другого элемента, чем флажок нажал. По умолчанию это если задано значение false.

Наконец, взгляните на скрипку я создал и играть вокруг. Вы увидите, что HTML-разметка-это гораздо более упрощенным.

http://jsfiddle.net/jfhartsock/WwtJr/

1
ответ дан 28 сентября 2011 в 03:09 Источник Поделиться