Sdscompany.ru

Компьютерный журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Html checkbox checked

Как обрабатывать события 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/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;
>

При наведении курсора, делаем цвет фона немного темнее.

Читать еще:  Php округление до десятых

.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.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Стилизуем чекбоксы и радиокнопки с CSS3

    Благодаря CSS3, мы можем добиться практически любого нужного нам на экране эффекта. В этом уроке рассмотрим, каким образом можем стилизовать чекбоксы и радио кнопки.

    Существует 2 типа элементов форм, которые очень трудно стилизовать под себя (особенно задать один стиль для всех платформ) — Windows, OS X, Linux по-своему отображают данные элементы.

    HTML код

    начнём мы с создания html документа со следующей структурой:

    Радио кнопки

    Чекбоксы

    С html структурой мы закончили. Теперь давайте посмотрим, каким образом мы можем стилизовать элементы . Первым делом возьмёмся за радио элементы. Отображение позаимствуем с дизайна OS:

    Стилизуем радиокнопки

    В первую очередь, мы меняем иконку курсора на pointer (появляется рука с пальцем), для того чтобы пользователь понимал, что данный элемент кликабилен:

    Затем спрячем радио кнопку по её атрибуту:

    Заменяем скрытый элемент псевдо классом :before.

    Такой же стиль мы применим и к чекбоксу. Разница только в том, что для радио кнопки нам нужно сформировать окружность. Добиться подобного эффекта мы можем, воспользовавшись border-radius и задав радиус в половину ширины и высоты элемента.

    На данном этапе наши элементы должны выглядеть вот так:

    Теперь нам нужно добавить мелкие кружочки в основной круг при клике по кнопке. Для этого воспользуемся псевдо-элементом CSS3 :checked, и в качестве контента запишем HTML символ круга • •, но для того чтобы всё отображалось так, как нам нужно, данное значение нужно преобразовать для CSS. Для этого можем воспользоваться сервисом Entity Conversion Tool

    Теперь когда мы нажмём на радио кнопку, в основном сером круге должен появиться маленький белый кружок.

    Стилизуем чекбоксы

    Теперь давайте займёмся оформление чекбоксов. Для начала снова спрячем элемент:

    Поскольку мы убираем стандартное отображение чекбокса при помощи псевдо-элемента :before, просто добавим рамку:

    Затем добавим символ “галочка”, который появится при клике по чекбоксу. Сделаем это по аналогии с радиокругом. На этот раз нам понадобится преобразовать HTML символ ? ✓.

    В итоге, вот что у нас должно получиться:

    Итоги

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

    Данный урок подготовлен для вас командой сайта ruseller.com
    Источник урока: http://www.hongkiat.com/blog/css3-checkbox-radio/
    Перевел: Станислав Протасевич
    Урок создан: 8 Марта 2013
    Просмотров: 169598
    Правила перепечатки

    5 последних уроков рубрики «CSS»

    Забавные эффекты для букв

    Небольшой эффект с интерактивной анимацией букв.

    Реализация забавных подсказок

    Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

    Анимированные буквы

    Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

    Солнцезащитные очки от первого лица

    Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

    Раскрывающаяся навигация

    Экспериментальный скрипт раскрывающейся навигации.

    CSS стилизация checkbox и radio – 2 варианта

    В этой статье подробно разберём процесс кастомной стилизации чекбоксов и радиокнопок с помощью CSS.

    Как осуществляется создание кастомного чекбокса или переключателя?

    Данный процесс осуществляется посредством скрытия стандартного элемента и создания с помощью CSS другого «поддельного», такого как мы хотим .

    Но как же это будет работать, если стандартный input скрыть? Это можно выполнить благодаря тому, что в HTML переключить состояние checked можно не только с помощью самого элемента input , но и посредством связанного с ним label .

    Читать еще:  Php как изменить округлять числа

    В HTML связывание label с input выполняется одним из 2 способов:

    1. Посредством помещения элемента input в label :

    2. Посредством задания элементу input атрибута id , а label – for с таким же значением как у id .

    В этой статье мы подробно разберём шаги по кастомизации checkbox и radio , в которых label с input свяжем по 2 варианту. Создание «поддельного» чекбокса выполним с использованием псевдоэлемента ::before , который поместим в label . При этом никакие дополнительные элементы в разметку добавлять не будем.

    Создание стильного чекбокса

    Процесс замены стандартного вида чекбокса на кастомный осуществим посредством выполнения следующей последовательности шагов.

    Шаг 1. Создадим разметку.

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

    В этом примере элемент label расположен после input . Связь label с input осуществляется посредством соответствия значения for элемента label с id элемента input .

    В примере к элементу input добавлен класс custom-checkbox . Данный класс мы будем использовать при составлении селекторов и тем самым с помощью него определять элементы к которым следует добавить стилизованный чекбокс вместо обычного. Т.е. его присутствие или отсутствие будет определять с каким чекбоксом (со стандартным или поддельным) будет выводится элемент input с type=»checkbox» .

    Шаг 2. Напишем стили для скрытия стандартного элемента input .

    Мы не будем использовать display: none , а установим ему стили, с помощью которых уберём его из потока ( position: absolute ), поместим его ниже существующих элементов ( z-index: -1 ), а также сделаем его полностью прозрачным ( opacity: 0 ). Зачем это нужно? Это нам необходимо для того, чтобы мы могли получить состояние фокуса, а затем стилизовать «подделный» checkbox или radio , когда он будет находиться в нём.

    Шаг 3. Создадим поддельный чекбокс.

    Создание «поддельного» чекбокса выполним с помощью псевдоэлемента ::before . Посредством CSS зададим ему размеры (в данном случае 1em x 1em ), а затем нарисуем его с помощью border: 1px solid #adb5bd . Свойства начинающие со слова background будут определять положение самого флажка (когда checkbox будет в состоянии checked ).

    Первое правило необходимо для вертикального центрирования флажка и надписи к нему. Это действие в примере выполнено через CSS Flexbox.

    Шаг 4. Создадим стили при нахождении элемента в состоянии checked .

    В этом коде при получении элементом состояния checked применим к псевдоэлементу ::before находящемуся в label стили, посредством которых установим цвет границы, цвет фону и фоновую картинку (флажок) в формате svg.

    Шаг 5. Добавим код для стилизации чекбокса при нахождении его в состояниях hover , active , focus и disabled .

    Разработка кастомного переключателя

    Стилизация переключателя ( input с type=»radio» ) выполняется аналогично, т.е. посредством тех же шагов которые мы применяли при кастомизации чекбокса.

    Итоговый набор стилей для кастомного оформления input с type=»radio» :

    Ещё примеры по кастомизации checkbox и label

    В этом разделе представлены следующие примеры:

    1. Стилизация checkbox, когда input расположен в label .

    2. Стилизация radio , когда input расположен в label .

    83 Checkboxes CSS

    Collection of free HTML and CSS custom checkbox examples: with image, with label, checked, etc. Update of February 2019 collection. 14 new items.

    Related Articles

    Author

    • Katherine Kato
    • February 17, 2020

    Links

    Made with

    • HTML / CSS (SCSS)

    About a code

    Todo Checkbox

    Todo checkbox with a text fill hover and strikethrough effect when checked.

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • Aaron Iker
    • January 31, 2020

    Links

    Made with

    • HTML / CSS (SCSS)

    About a code

    +/- Toggle

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • Andreas Storm
    • January 29, 2020

    Links

    Made with

    • HTML (Pug) / CSS (Stylus)

    About a code

    Gooey Checkbox

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • Braydon Coyer
    • January 28, 2020

    Links

    Made with

    • HTML / CSS (SCSS)

    About a code

    Neuomorphic Checkboxes

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • Aaron Iker
    • January 11, 2020

    Links

    Made with

    • HTML / CSS (SCSS)

    About a code

    2020 Toggles

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • Chris Weissenberger
    • December 23, 2019

    Links

    Made with

    • HTML / CSS (SCSS)

    About a code

    Neumorphic Design

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • Aaron Iker
    • December 9, 2019

    Links

    Made with

    • HTML / CSS (SCSS)

    About a code

    Checkboxes

    Micro-interaction is a couple variations on a classic checkbox.

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • Andreas Storm
    • October 3, 2019

    Links

    Made with

    • HTML (Pug) / CSS (Sass)

    About a code

    Checkmark

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • Himalaya Singh
    • June 29, 2019

    Links

    Made with

    • HTML / CSS

    About a code

    Checkbox Animation

    Checkbox animation created using HTML and CSS only.

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • Andreas Storm
    • June 15, 2019

    Links

    Made with

    • HTML (Pug) / CSS (Stylus)

    About a code

    Checkbox

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • Mohammadreza Ziadzadeh
    • June 15, 2019

    Links

    Made with

    • HTML / CSS (SCSS)

    About a code

    Checkbox

    Simple checkbox with animation.

    Читать еще:  Поиск по таблице php

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • Ana Tudor
    • June 6, 2019

    Links

    Made with

    • HTML / CSS (SCSS)

    About a code

    Fancy Checkbox

    Uses only a checkbox input and label (so it’s accessible by default) inside a form (as blending directly with the body is buggy).

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • Andreas Storm
    • February 6, 2019

    Links

    Made with

    • HTML (Pug) / CSS (Stylus)

    About the code

    Lock Checkbox

    Lock — pure CSS micro interaction made with HTML checkbox and SVG.

    Compatible browsers: Chrome, Firefox, Opera, Safari

    Author

    • Andreas Storm
    • February 9, 2019

    Links

    Made with

    • HTML (Pug) / CSS (Stylus)

    About the code

    Flip Checkbox

    Flip checkbox in HTML and CSS.

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • @mandycodestoo
    • December 2, 2018

    Links

    Made with

    • HTML (Pug) / CSS (SCSS)

    About the code

    Checkbox

    Pure CSS animated checkbox.

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • Adam Quinlan
    • October 18, 2018

    Links

    Made with

    • HTML / CSS

    About the code

    Chippy Checkbox Inputs

    I had occasion to create a field of checkboxes recently for a form and thought I would try to have a little fun with the styling.

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • Aaron Iker
    • September 20, 2018

    Links

    Made with

    • HTML / CSS (SCSS)

    About the code

    Toggle Checkbox Animation

    Toggle check button. Sweet animation, smooth and right speed.

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • Jase
    • August 23, 2018

    Links

    Made with

    • HTML / CSS

    About the code

    Fancy Checkboxes and Radio Buttons

    It’s been decades — checkboxes and radio buttons still look terrible and don’t play well without some love. Starting with well-formed HTML, look what we can do with a bit of style and some Font Awesome glyphs.

    Compatible browsers: Chrome, Firefox, Opera, Safari

    Author

    • Stas Melnikov
    • July 18, 2018

    Links

    Made with

    • HTML / CSS

    About the code

    Pure CSS Checkboxes

    I’ve used nested span elements for creating an animation of square turn and creating an arrow animation.

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • Jouan Marcel
    • July 5, 2018

    Links

    Made with

    • HTML (Pug) / CSS (Sass)

    About the code

    Emojibox — Checkbox with Emojis

    Checkbox with emojis (without JS). Create more expressive checkboxes with emojis. They combine the simplicity of checkboxes for the user with the expressiveness of emojis. It makes use of checkbox and radio button to create a binary or non-binary selection. Animations are done with CSS transitions.

    Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

    Author

    • Andreas Storm
    • May 9, 2018

    Links

    Made with

    • HTML
    • CSS/Sass

    About the code

    CSS Toggle

    Material design CSS toggle.

    Author

    • Andreas Storm
    • May 3, 2018

    Links

    Made with

    • HTML
    • CSS/Stylus

    About the code

    CSS Design Checkbox

    CSS material design checkbox.

    Author

    • Andreas Storm
    • April 18, 2018

    Links

    Made with

    • HTML
    • CSS/Sass

    About the code

    Checkbox

    Author

    • Adam Kuhn
    • April 17, 2018

    Links

    Made with

    • HTML/Haml
    • CSS/SCSS

    About the code

    Pure CSS Skateboard Checkbox

    Built with pure css and a bit of patience.

    Author

    • Adam Kuhn
    • February 1, 2018

    Links

    Made with

    • HTML
    • CSS/SCSS

    About the code

    Toggles

    Author

    • David Darnes
    • March 13, 2018

    Links

    Made with

    • HTML
    • CSS

    About the code

    Toggle

    Nice smooth movement and the added detail with the animated turn on the head. Based on «Toggle» by Daryl Ginn.

    Author

    • Katherine Kato
    • March 9, 2018

    Links

    Made with

    • HTML
    • CSS/SCSS

    About the code

    Toggle

    Pure CSS toggle switch.

    Author

    • Luis Adame
    • February 18, 2018

    Links

    Made with

    • HTML/Pug
    • CSS/SCSS

    About the code

    Cool Checkbox With SVG

    A custom checkbox that makes use of SVG to animate the tick inside of it.

    Author

    • Ana Tudor
    • February 15, 2018

    Links

    Made with

    • HTML
    • CSS/SCSS

    About the code

    CSS Toggle Switch

    CSS soft toggle switch.

    Author

    • Brett Commandeur
    • February 13, 2018

    Links

    Made with

    • HTML
    • CSS

    About the code

    Emoji Checkbox

    Pure CSS emoji checkbox.

    Author

    • Buddy Reno
    • September 12, 2017

    Links

    Made with

    • HTML
    • CSS/SCSS

    About the code

    Material Inspired Checkboxes

    The trick to this is placing the label after the checkbox. That way you can use the :checked state to toggle the different pseudo elements on the label. No javascript necessary. To make the background animation work, you’ll need a tiny bit of magic. The label:before element is a small 10×10 circle. We animate the scale of it instead of the size so that we can keep the proportion of the circle and make it look like it «fills out» the bar. The max width of the form is set to 550px. The :before element animates by using scale3d (for hardware acceleration) by 56 times. 56 * 10 === 560. This allows the circle to fill out the bar by going slightly outside the bounds of the input group container.

    Ссылка на основную публикацию
    Adblock
    detector