Загрузка...Html checkbox value
Как сделать чекбокс на HTML/CSS
Сегодня вы узнаете как сделать чекбокс на HTML и добавить ему CSS стилей для лучшей совместимости с дизайном сайта.
Демонстрация
Чекбокс на HTML
Создадим блок с четырьмя чекбоксами, первый будет отмечен – с галочкой. Каждый чекбокс будет заключен в тег label, внутри которого поле для ввода, текст и элемент span, который предстоит стилизовать.
Тег label служит контейнером для каждого чекбокса, для наглядности я временно задал красную рамку тегу label. Когда мало опыта, это хороший способ, увидеть границы любого тега, чтобы не действовать вслепую.
CSS для чекбокс
Строчный тег label, заменим на блочный (display: block), чтобы чекбоксы, встали друг под другом, user-select: none – запрещает пользователю выделять элемент.
.container <
display: block;
user-select: none;
>
Этот код прячет дефолтные браузерные стили для чекбокса. Мы делаем элемент полностью прозрачным за счет opacity, width и height с нулевым значением и на их месте, задаем кастомные стили для чекбокса.
.container input <
opacity: 0;
height: 0;
width: 0;
>
Создаем кастомные чекбоксы. Меняем размеры и цвет фона.
.checkmark <
height: 23px;
width: 22px;
background-color: #eec321;
>
При наведении курсора, делаем цвет фона немного темнее.
.checkmark <
background-color: #ccc678;
>
Для отмеченного чекбокса, задаем другой цвет для фона.
.checkmark <
background-color: #2196f3;
>
Прячем галочку для не отмеченных чекбоксов, применив псевдоэлемент after.
.checkmark:after <
content: «»;
position: absolute;
display: none;
>
Делаем видимой галочку, только для отмеченных чекбоксов.
.checkmark:after <
display: block;
>
Рисуем и стилизуем галочку. Галочку мы рисуем на чистом CSS. Изобразим прямоугольник с белой рамкой, у двух сторон прямоугольника, рамки нет (нулевая ширина), получается прямоугольный угол, мы его поворачиваем на 45 градусов и получается галочка.
.container .checkmark:after <
left: 8px;
top: 6px;
width: 6px;
height: 11px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
>
Посмотреть код целиком можно на Codepen
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.
Как обрабатывать события HTML checkbox
Элемент HTML checkbox позволяет выбрать одно значение в форме. Например, чтобы узнать владеет ли пользователь английским языком, можно добавить чекбокс. Если да, то он устанавливает флажок, если нет — оставляет его пустым.
В этой статье мы рассмотрим:
- Как обрабатывать события onclick и onchange.
- Как обрабатывать события checkbox в JQuery.
- Как отправлять данные формы при установке флажка.
- Как отобразить / скрыть раздел формы при установке флажка чекбокса.
В этом примере мы будем использовать форму, через которую передается имя пользователя. В ней размещен чекбокс, в котором пользователь должен установить флажок, если он свободно владеет английским языком. Если нет, то отображается подсказка с текстом, что для этой вакансии нужен разговорный английский.
Обработка событий checkbox с использованием JavaScript
Теперь нужно привязать к чекбоксу событие, чтобы проверять его состояния, и выводить сообщение, если флажок не установлен. Обратите внимание, что я добавил к чекбоксу свойство checked, которое будет задано по умолчанию.
Существует два события, которые можно привязать к чекбоксу. Они будут запускаться после изменения состояния элемента. Это события onclick и onchange.
Событие onchange не вызывается до тех пор, пока состояние checked не будет обновлено. Internet Explorer не запускает событие onсhange, пока с чекбокса не снят фокус ввода. Чтобы избежать этой проблемы, я рекомендую использовать событие onclick.
В коде HTML я добавляю событие onclick, которое буде вызывать функцию checkFluency():
В checkFluency() мы отслеживаем состояние чекбокса. Если флажок не установлен, то отображаем предупреждение.
Использование jQuery
То же самое можно реализовать с помощью jQuery. В коде примера я подключил jQuery и добавил пару строк CSS для стилизации страницы.
Я также добавил HTML, который мы использовали в предыдущем разделе. В этом примере мы будем использовать jQuery вместо JavaScript.
Обратите внимание, что я удалил событие onclick. В jQuery мы будем привязывать событие к элементу без необходимости вызывать его из HTML-кода.
Ниже приводится код JavaScript:
Я использую $(document).ready(); с анонимной функцией. Это функции, объявленные во время выполнения, и без имени.
Внутри анонимной функции я разместил следующий код:
Мы используем знак доллара ‘$’ , который является сокращением для jQuery. Поэтому $(‘# fluency’) — это то же самое, что и jQuery (‘# fluency’) . Затем мы привязываем событие и внутри него используем синтаксис анонимных функций во второй раз. Код, находящийся внутри анонимной функции, будет запускаться каждый раз при возникновении события.
Это то же самое, что и оператор if, который мы применяли в первом примере. Только вместо document.getElementById() мы используем ключевое слово this. Оно указывает на элемент, который вызовет события. В данном примере это checkbox.
Отправка данных формы при установке флажка
Данные формы можно отправить сразу после того, как пользователь установит флажок. Для этого нужно указать идентификатор формы. Затем я использую jQuery, чтобы захватить его и отправить данные на обработку.
Скрыть / показать элементы при установке флажка
Большинство из вас встречало формы с разделом, который отображается после установки флажка чекбокса. Для реализации данного решения будем использовать jQuery.
Внутри div располагается форма. В ее поля пользователь вводит имя и адрес электронной почты. В веб-форме также есть чекбокс и текстовая область (textarea).
Когда флажок чекбокса установлен, текстовая область отображается. Поэтому по умолчанию она должна быть скрыта. Для этого мы создаем скрытый контейнер div (с id conditional_part):
Следующий шаг — создание JavaScript- кода, который будет отображать и скрывать эту текстовую область.
Кcheckbox с идентификатором more-info мы привязываем событие onchange, которое запускает анонимную функцию при возникновении события.
Внутри анонимной функции используется оператор if. Он проверяет, установлен ли флажок чекбокса или нет. Затем мы применяем jQuery- функции hide() и show() . Они изменяют значения свойства display блока div с идентификатором conditional_part.
Данная публикация представляет собой перевод статьи « How to handle HTML checkbox events » , подготовленной дружной командой проекта Интернет-технологии.ру
Html чекбоксы – Флажок checkbox — «галочка» в HTML форме
Атрибут checked | htmlbook.ru
Спецификация
Описание
Этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton), может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
Результат данного примера показан на рис. 1.
Рис. 1. Помеченный флажок в форме
Красивые чекбоксы и радиокнопки на CSS3 без JavaScript / Habr
Демонстрация Скачать исходники
Для начала сделаем простой checkbox:
Теперь необходимо спрятать чекбокс и использовать спрайты для отображения отмеченного чекбокса/радиокнопки:
Осталось только заставить все это работать. По клику должен меняться спрайт с отмеченного на неотмеченный и наоборот:
Поддержка браузерами
Пост написан по мотивам урока на tutplus.com Quick Tip: Easy CSS3 Checkboxes and Radio Buttons.
Чекбоксы HTML.
Мы продолжаем рассматривать элементы формы и сегодня мы рассмотрим еще один вид переключателей в HTML это чекбоксы. Чекбоксы это альтернатива радиокнопкам только чекбоксы позволяют выделить одновременно несколько элементов в противоположность радиокнопкам, где можно выбрать только один элемент.
Чекбоксы создаются очень просто с помощью все того же тега
И так, создадим пару таких чекбоксов, позволяющих пользователю сделать выбор из предложенных вариантов. Для этого создаем отдельный абзац, в котором создадим сами чекбоксы, где и предложим варианты выбора.
Как мы видим, каждый чекбокс мы заключили в тег , чтобы при нажатии на название фрукта чекбокс выделялся автоматически. Как уже заметили у каждого чекбокса свое имя, т.е. у атрибута name свое индивидуальное значение.
Если вы уже сохранили у себя в редакторе код выше и обновили браузер то у Вас должны были появится четыре чекбокса, которые можно выбрать хоть один, хоть все сразу. В данном варианте при загрузке страницы все чекбоксы пустые, однако бывают ситуации, когда нужно по умолчанию выделить один из них.
Для этого используется все тот же атрибут checked, который изначально отмечает выбранный чекбокс.
Теперь, если посмотрите, то чекбокс с именем «Апельсины» автоматически становится активным. И рассмотрим еще один атрибут для чекбоксов, который позволяет сделать не активный чекбокс. Этот атрибут именуется
В примере выше, как видно первый элемент по умолчанию становится активным, так как присутствует атрибут checked, а последний чекбокс на против не активен так как «Перец» не является фруктом и нечего его выбирать. Для деактивации этого чекбокса использован атрибут disabled, что и сделало область не активной.
Вот и все с чекбоксами. Результат смотрите Демо-версии, а мы переходим к следующему элементу формы select.
Меняем оформление input checkbox с помощью CSS
Оформление элементов формы — это старая проблема. Ситуация несомненно улучшается, но финала пока не видно. С появлением псевдо-контейнеров :after и :before стало возможным без дополнительных элементов и скриптов кастомизировать элемент INPUT:CHECKBOX.
Чекбокс как есть
Чекбокс как есть
В разных браузерах этот элемент будет выглядеть по разному. Chrome, Opera, IE, Yandex и прочие — будут по мере сил и фантазии разработчиков выводить checkbox с собственным оформлением.
Квадрат и галочку нельзя изменить стандартными стилями вроде:
// это работать не будет input[type=»checkbox»]
// это работать не будет
border: 1px solid #f00;
Поэтому стоит задача полностью заменить вывод стандартного элемента на свой, и мы сделаем это, используя только CSS.
План действий такой:
- Скрываем вывод чек-бокса;
- Формируем нужный внешний вид чекбокса в псевдо — элементе label:before;
- Дополнительные стили формируют внешний вид текущего статуса.
Важно, чтобы элемент Label был связан с чекбокс (через параметр for), тогда нажатие на метку передаётся на связанный элемент, и все работает как нужно без дополнительных скриптов.
/* прячем input checkbox */
/* стили для метки */
/* формируем внешний вид чекбокса в псевдоэлементе before */
font: 20px/30px Arial;
border: 1px solid #e3e3e3;
/* вариации внешнего вида в зав-ти от статуса checkbox */
Теперь внешний вид становится везде одинаковым и выглядит вот так:
Как видите для вывода галочки я использовал просто символ «x» из шрифта Arial. Далее вы можете сами решать как выглядит контейнер и галочка.
Я к примеру использую шрифт awesome, в котором есть литера галочки.
Вот тот же CSS с использованием FontAwesome:
font: 20px/30px FontAwesome;
border: 1px solid #e3e3e3;
Так выглядит checkbox с галочкой из набора иконок Awesome.
Картинка вместо чекбокса | htmlbook.ru
Исходные чекбоксы в форме выглядят хотя и привычно, но уже несколько старомодно. Порой хочется вместо чекбокса использовать стильную картинку, которая лучше будет вписываться в существующий дизайн. С помощью CSS3 мы можем это сделать без всяких скриптов, при этом учтём и старые версии браузеров, в которых функционал формы должен сохраниться.
Для начала подготовим изображения. Нам потребуется две картинки соответствующие разному статусу чекбокса — когда он включен и выключен (рис. 1).
Рис. 1. Вверху чекбокс выключен, внизу он включен
Желательно объединить две картинки в одну в графическом редакторе, сделать из них так называемый CSS-спрайт. Дело в том, что первая картинка покажется сразу после загрузки, а вторая начнёт загружаться только после щелчка по чекбоксу. Несмотря на малый размер изображений и объём загружаемого файла, на загрузку и отображение картинки в первый раз потребуется какое-то время. Даже когда речь идёт о доли секунды эта задержка заметна визуально. Если же мы объединим рисунки в одно изображение, то оно будет загружаться целиком и показываться без малейшего замедления. Чтобы создать иллюзию того, что у нас одна картинка, а не две, надо ограничить размеры элемента и выводить изображение в виде фона. И в нужный момент просто-напросто смещать фон вверх или вниз.
После того, как спрайт сделан, перейдём к HTML-коду. Он содержит три важных элемента.
Первый это тег , он создаёт вокруг чекбокса невидимую рамку, щелчок внутри которой включает или выключает галочку в чекбоксе. Его наличие позволяет не щёлкать непосредственно по чекбоксу, размеры которого довольно малы, а щёлкать за пределами чекбокса. При этом всё будет работать именно так, как нам и нужно, даже несмотря на то, что по самой галочке мы не попали.
Далее идёт сам чекбокс ( ) со всеми желаемыми параметрами. Здесь никаких ограничений нет, вставляйте в тег любые необходимые атрибуты.
После следует пустой , этот элемент будет выполнять декоративную роль, именно к нему и применяется наш рисунок.
Для начала определим размер отображаемого рисунка. У меня он составляет 32х26 пикселов. Заметьте, здесь речь идёт не о спрайте, где у нас объединено две картинки, а об одном изображении. Эти размеры подставляем в стиль селектора label.
Стиль чекбокса не трогаем, он в любом случае не будет виден и переходим к нашему «декоративному» . Важно сделать чтобы элемент занимал всю доступную область внутри . Для этого задаём абсолютное позиционирование и устанавливаем ширину и высоту как 100% от родителя. Заодно смещаем элемент в левый верхний угол.
Картинка добавляется как фон, здесь никаких сюрпризов нет, и меняем для разнообразия форму курсора.
На этом этапе наш чекбокс уже превратился в симпатичную картинку, осталось только задать смену рисунка, когда внутри чекбокса стоит галочка. Для этого воспользуемся псевдоклассом :checked, он срабатывает при установке галочки в поле. Правда тут есть одна хитрость. :checked применяется к чекбоксу, а менять его стиль необходимости нет, нас интересует только «декоративный» span. Поэтому используем соседние селекторы и добавляем стиль к span идущему после чекбокса с галочкой.
Надеюсь, теперь стало понятно такое положение в HTML-коде, как раз для того, чтобы его легко стилизовать с помощью псевдокласса :checked.
Собираем код воедино (пример 1) и тестируем его в браузерах.
Пример 1. Картинка вместо чекбокса
Браузеры
Все современные версии браузеров — Firefox, Chrome, IE9, Opera, Safari показали одинаковый рабочий результат.
Также код не будет работать в IE8, эта версия не понимает :checked. Давайте сделаем поддержку старых версий IE, для чего вернём настройки элементов формы по умолчанию. Для начала к элементам желательно добавить классы и в стилях обращаться именно к ним. Так мы сможем задать стиль любого элемента без обращения к псевдоклассам CSS3.
Чтобы в стилях затронуть версии IE младше 9.0 воспользуемся условными комментариями. В стилях остаётся задать ширину и высоту для label по умолчанию и скрыть span (пример 2).
Пример 2. Стиль для IE8
Данный код надо вставить сразу после закрывающего тега в примере 1. Таким образом мы получим классический вид чекбоксов в IE7-8 и меняющуюся картинку в современных браузерах.
Флажки | WebReference
Флажки (жарг. чекбоксы) используют, когда необходимо выбрать любое количество вариантов из предложенного списка. Если требуется выбор лишь одного варианта, то для этого следует предпочесть переключатели (radiobutton). Флажок создаётся следующим образом.
HTML | Свойство DOM Input Checkbox
Объект флажка ввода в HTML представляет флажок в форме HTML.
Для каждого экземпляра элемента в форме HTML создается объект флажка. Для доступа к объекту флажка используйте индексирование массива элементов соответствующей формы или с помощью getElementById ();
Создание объекта флажка : мы можем создать объект флажка через JavaScript. Для создания элемента используйте метод document.createElement (). После создания используйте метод appendChild (), чтобы добавить его к определенному элементу (например, div), чтобы отобразить его.
Пример:
DOM Input Checkbox Property
body style = «text-align: center;» >
h1 style = «color:green;» >
DOM Input Checkbox Property
p >Click the button to create a checkbox. p >
button onclick = «geek()» >Click me! button >
div id = «myDiv» > div >
var myDiv = document.getElementById(«myDiv»);
// creating checkbox element
var checkbox = document.createElement(‘input’);
// Assigning the attributes
// to created checkbox
// creating label for checkbox
var label = document.createElement(‘label’);
// assigning attributes for
// the created label tag
// appending the created text to
// the created label tag
label.appendChild(document.createTextNode(‘This is the
label for checkbox.’));
// appending the checkbox
// and label to div
Выход:
Перед нажатием кнопки: 
После нажатия на кнопку: 
Доступ к объекту флажка: мы можем получить доступ к объекту флажка с помощью метода getElementById (). Поместите идентификатор элемента checkbox в getElementById (), чтобы получить к нему доступ.
Пример:
DOM Input Checkbox Property
body style = «text-align: center;» >
h1 style = «color:green;» >
DOM Input Checkbox Property
p >Click the button to check the checkbox. p >
button onclick = «myFunction()» >Click me! button >
Checkbox: input type = «checkbox» id = «check» >
// fetching the checkbox by id
var doc = document.getElementById(«check»);
// changing the state of checkbox to checked
Выход:
Перед нажатием кнопки: 
После нажатия на кнопку: 
Managing Checkboxes And Radios In ASP.NET Razor Web Pages
Checkboxes and radio buttons cause more confusion than any other form control in ASP.NET Razor Web Pages. This article takes an in depth look at them and tackles the most frequently asked questions that they generate.
Checkboxes are used to enable users to select zero or more available options. Typical examples of usage might include providing a means for people to indicate which, if any, hobbies they like. Most commonly, you see checkboxes being used to provide the user with a means to signify acceptance of terms of use or similar. Radio buttons are generally used in groups and allow selection of only one of a group of options. You might use them to specify the postage option for shipping, or to choose between yes and no.
Both controls are types of the HTML element. The type attribute dictates the field type. For checkboxes, the type attribute must be «checkbox» . For radio buttons, the type is «radio «:
Alternatively, you might want to use the HTML form helpers that come with Web Pages to render your controls:
Name and Value attributes
A name attribute is required if you want to access the form control’s value when the containing form is submitted to the server. If you use the HTML helper, the string that you pass in to the helper method will be used for both the name and id attributes. The default value for both checkboxes and radio buttons is «on» . You can provide any other value to the value attribute, but if you omit it altogether, the default value is used. The following code demonstrates that:
If you run this page and check both boxes, the rendered result is as follows:
chk2 value: my own value
When you submit a form, most controls within the form are added to the Request collection along with their value or an empty string if none was provided. This is not the case with radios and checkboxes. If they are not selected, they will not be added to the Request collection. That means they will be null in server-side code. They share this behaviour with the input that has a type attribute of ‘submit’. You can test this yourself with a simple form like this:
You can use the ObjectInfo helper to examine the values when you submit the empty form using the :
The output confirms that radios, checkboxes and input type=»submit» are all null if they are not checked or clicked:
You have to test to see if the checkbox, radio or submit is present in the collection before you attempt any operations on them, otherwise you will receive a NullReferenceException: «Object reference not set to an instance of an object». You can use the IsEmpty() helper to determine if a form value is present as it tests for null before it tests to see if an empty string is present.
Grouping
You can group checkboxes and radios together to add additional behaviour. You do this by supplying multiple elements with the same name attribute value:
This will result in 5 checkboxes, each with the name ‘check’ but with incrementing values from 1 — 5. When you group checkboxes, the user can select as many within the group as they like. When the containing form is posted, all the values of the checked boxes are received on the server as a comma-separated string. If all boxes are checked in the example above, the value of Request[«check»] will be «1,2,3,4,5» . Typically, you will want to process each value separately so you use the string.Split method to convert the string into an array that you can then iterate:
Radio buttons behave differently when you group them by providing them with the same name value. Only one radio within a group can be checked at any time. The only way to uncheck a radio is select another one in the same group. Therefore they are a good way to force a user to make a selection, especially if you set one of the radios as checked by default. You do that by setting the checked attribute value to ‘checked’, although browsers will also accept the presence of the checked attribute alone — or with any other value applied- as indicating the radio (or checkbox) has been selected. All of the following result in the element being checked — even if you try to apply ‘false’ as a value to the checked attribute:
Both of the last two will result in a checked radio in most browsers, but will not validate as HTML.
If you want to set the checked status of a radio or checkbox dynamically using Razor, you can take advantage of a Razor feature called Conditional Attributes that was introduced in version 2 of the Web Pages framework (MVC 4 onwards). To use this feature, you pass a boolean expression or variable into the checked attribute. If the expression resolves to ‘true’, Razor will render checked=»checked» to the browser. If it resolves to ‘false’, the checked attribute is not rendered at all. Here’s an example that will (rather uselessly) result in a checkbox being checked if it is rendered when the hour is even:
If you wanted to use the Html Helper, the syntax is as follows:
HTML Helpers
Having started to look at the Html helper in the previous example, it is worth exploring their use in a bit more detail. The Html helpers offer a more succinct syntax than their HTML counterparts and can help to minimise code in the view area of your page. Most of them also translate across to their MVC counterparts, so if there is a possibility that you may upgrade to MVC at some time, using the helpers will minimise the work required to migrate the View area. Note that the Razor Web Pages Html helpers are NOT the same as the MVC Html helpers. They come from different libraries. The Razor Web Pages helpers come from System.Web.WebPages.Html, whereas the MVC helpers are in System.Web.Mvc.Html.
You have already seen a couple of examples of the helpers’ use: the first example at the beginning of the article showed just a string being passed in to the helper method:
The string passed in will be used for both the name and id attribute. This default behaviour could cause a problem when grouping. It is perfectly acceptable to have multiple elements on the same page share the same name attribute value, but the id attribute value should be unique for each element. If you pass in the same string to multiple checkbox helpers, they will all share the same id as well as the same name. The way to get round that is to override the id value by passing in your own to the htmlAttributes parameter of the helper. You do this either by passing in an attribute and its value using a Dictionary or an anonymous type:
Both of these approaches result in 5 checkboxes, all with the same name, but with id values that increment from 1 to 5. So why are there two approaches to achieve the same outcome? Well, the anonymous type approach is by far the shorter syntactically, and would generally be preferred. An anonymous type is a proper C# type that acts as nothing more than a short-lived read-only type where you both declare property names and set their values using the object initialiser syntax. Once you realise that the left hand side of the equation is a property, you realise that it must conform to the rules that apply to naming properties in C#. In particular, you cannot use a hyphen in a property name. Most attributes do not include hyphens in their name, but the HTML5 custom ‘data-‘ attributes do. So if you want to specify the value if a ‘data-‘ attribute, you will have to use the dictionary approach:
The above example sets two attributes, data-custom and class . If you just wanted to set the class attribute value, you can use the anonymous type approach — but you need to prefix the word ‘class’ with an @ symbol:
This has nothing to do with Razor syntax. It is a requirement of C# since ‘class’ is a C# keyword. Generally, you should avoid using keywords for C# identifiers (including property names), but in this case it is unavoidable.
Client-side
While the focus of this article is the use of Checkboxes and radios in Razor programming, it is also worth briefly covering a couple of client-side questions that come up regularly: How do I determine the state of a checkbox or radio in client-side code? And how do I provide an easy way for users to select all checkboxes?
In both cases, jQuery is the library of choice for DOM querying and manipulation, so the solutions will feature its use. The easiest way to determine if a checkbox or radio is checked is to inspect its checked property:
This will return true if the checkbox belonging to the specified element is checked, and false if not.
The following code illustrates the Select All question and its solution.
One checkbox is labeled ‘Select All’. When this is checked, all the checkboxes with a class of ‘check’ will be checked too. The checkbox labeled ‘Select All’ is set to checked if all checkboxes with the class ‘check’ are checked. This is determined by creating two selectors — one that contains all checkboxes with the class ‘check’ and another that contains a sequence of checkboxes with the class ‘check’ that have been checked. The length property of both sequences is compared. Then a click event handler is added to ‘Select All’ which sets all the other checkboxes to the same state as itself. This allows the user to toggle the state of all checkboxes using the Select All option. Finally, a click event handler is added to each target checkbox, which updates the state of the ‘Select All’ checkbox based on the state of all the checkboxes with the class ‘check’.
