На этом шаге мы рассмотрим пример использования флажков.

    В нашу форму ввода контактной информации добавим также раздел Прочее, который содержит список флажков, как показано на рисунке 1.

    Завершая усовершенствовать форму, мы поможем пользователю управлять этим списком. Группа из 10 флажков может показаться устрашающей, особенно если пользователю требуется пометить большую их часть. Возможность отметить или снять отметки со всех флажков оказывается весьма кстати в подобной ситуации. Давайте обеспечим такую возможность.

    Для начала создадим новый элемент <li>, добавим в него элемент <label>, внутрь которого поместим элемент <input type="checkbox" id="discover-аll"> с поясняющим текстом, и вставим все это перед элементом <ul> внутри <li class="discover">:

$(document).ready(function() {
  $('<li></li>')
  .html('<label><input type="checkbox" id="discover-all" />' + 
                                ' <em>Отметить все</em></label>')
  .prependTo('li.discover > ul');
  });
});

    Теперь у нас появился новый флажок с подписью Отметить все. Но он пока еще ничего не делает. Нам необходимо задействовать его метод .click():

$(document).ready(function() {
  $('<li></li>')
  .html('<label><input type="checkbox" id="discover-all" />' + 
                                ' <em>Отметить все</em></label>')
  .prependTo('li.discover > ul');
  $('#discover-all').click(function() {
    var $checkboxes = $(this) .parents('ul:first').find(':checkbox');
    if (this.checked) {
      $checkboxes.attr('checked', true);
    } else {
      $checkboxes.attr('checked', '');
    }
  });
});

    Внутри этого обработчика события мы сначала устанавливаем значение переменной $checkboxes, которое представляет собой объект jQuery, содержащий все флажки в текущем списке. Получив переменную, мы можем манипулировать флажками, просто отмечая их, если отмечен флажок Отметить все, и снимая отметки, если флажок Отметить все не отмечен.

    Последний штрих, который можно добавить к этому флажку, заключается в том, чтобы добавить класс checkall к подписи флажка Отметить все и изменить ее текст на Снять все отметки, после того как пользователь отметит его:

$(document).ready(function() {
  $('<li></li>')
  .html('<label><input type="checkbox" id="discover-all" />' + 
                                ' <em>Отметить все</em></label>')
  .prependTo('li.discover > ul');
  $('#discover-all').click(function() {
    var $checkboxes = $(this) .parents('ul:first').find(':checkbox');
    if (this.checked) {
      $(this).next().text(' Снять все отметки');
      $checkboxes.attr('checked', true);
    } else {
      $(this).next().text(' Отметить все');
      $checkboxes.attr('checked', '');
    }
  });
});

    Теперь группа флажков вместе с флажком Отметить все выглядит, как показано на рисунке 1.

Рис.1. В форму добавлен флажок Отметить все

    На следующем шаге мы приведем окончательную версию приложения.

Предыдущий шаг Содержание Следующий шаг