Как передать checkbox

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

Как передать checkbox

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

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

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

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

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

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

Happy

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

Happy

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

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

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

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

Happy

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

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

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

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

.custom-checkbox { position: absolute; z-index: -1; opacity: 0; }

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

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

.custom-checkbox+label { display: inline-flex; align-items: center; user-select: none; } .custom-checkbox+label::before { content: ''; display: inline-block; width: 1em; height: 1em; flex-shrink: 0; flex-grow: 0; border: 1px solid #adb5bd; border-radius: 0.25em; margin-right: 0.5em; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; }

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

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

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

.custom-checkbox:checked+label::before { border-color: #0b76ef; background-color: #0b76ef; background-image: url(«data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e»); }

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

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

/* стили при наведении курсора на checkbox */ .custom-checkbox:not(:disabled):not(:checked)+label:hover::before { border-color: #b3d7ff; } /* стили для активного состояния чекбокса (при нажатии на него) */ .custom-checkbox:not(:disabled):active+label::before { background-color: #b3d7ff; border-color: #b3d7ff; } /* стили для чекбокса, находящегося в фокусе */ .custom-checkbox:focus+label::before { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } /* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */ .custom-checkbox:focus:not(:checked)+label::before { border-color: #80bdff; } /* стили для чекбокса, находящегося в состоянии disabled */ .custom-checkbox:disabled+label::before { background-color: #e9ecef; }

Открыть пример

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

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

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

Green

Открыть пример

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

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

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

HTML разметка:

Indigo

CSS код:

/* для элемента input c type=»checkbox» */ .custom-checkbox>input { position: absolute; z-index: -1; opacity: 0; } /* для элемента label, связанного с .custom-checkbox */ .custom-checkbox>span { display: inline-flex; align-items: center; user-select: none; } /* создание в label псевдоэлемента before со следующими стилями */ .custom-checkbox>span::before { content: ''; display: inline-block; width: 1em; height: 1em; flex-shrink: 0; flex-grow: 0; border: 1px solid #adb5bd; border-radius: 0.25em; margin-right: 0.5em; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; } /* стили при наведении курсора на checkbox */ .custom-checkbox>input:not(:disabled):not(:checked)+span:hover::before { border-color: #b3d7ff; } /* стили для активного чекбокса (при нажатии на него) */ .custom-checkbox>input:not(:disabled):active+span::before { background-color: #b3d7ff; border-color: #b3d7ff; } /* стили для чекбокса, находящегося в фокусе */ .custom-checkbox>input:focus+span::before { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } /* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */ .custom-checkbox>input:focus:not(:checked)+span::before { border-color: #80bdff; } /* стили для чекбокса, находящегося в состоянии checked */ .custom-checkbox>input:checked+span::before { border-color: #0b76ef; background-color: #0b76ef; background-image: url(«data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e»); } /* стили для чекбокса, находящегося в состоянии disabled */ .custom-checkbox>input:disabled+span::before { background-color: #e9ecef; }

Открыть пример

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

HTML разметка:

Indigo

CSS код:

/* для элемента input c type=»radio» */ .custom-radio>input { position: absolute; z-index: -1; opacity: 0; } /* для элемента label связанного с .custom-radio */ .custom-radio>span { display: inline-flex; align-items: center; user-select: none; } /* создание в label псевдоэлемента before со следующими стилями */ .custom-radio>span::before { content: ''; display: inline-block; width: 1em; height: 1em; flex-shrink: 0; flex-grow: 0; border: 1px solid #adb5bd; border-radius: 50%; margin-right: 0.5em; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; } /* стили при наведении курсора на радио */ .custom-radio>input:not(:disabled):not(:checked)+span:hover::before { border-color: #b3d7ff; } /* стили для активной радиокнопки (при нажатии на неё) */ .custom-radio>input:not(:disabled):active+span::before { background-color: #b3d7ff; border-color: #b3d7ff; } /* стили для радиокнопки, находящейся в фокусе */ .custom-radio>input:focus+span::before { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } /* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */ .custom-radio>input:focus:not(:checked)+span::before { border-color: #80bdff; } /* стили для радиокнопки, находящейся в состоянии checked */ .custom-radio>input:checked+span::before { border-color: #0b76ef; background-color: #0b76ef; background-image: url(«data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e»); } /* стили для радиокнопки, находящейся в состоянии disabled */ .custom-radio>input:disabled+span::before { background-color: #e9ecef; }

Открыть пример

Источник: https://itchief.ru/html-and-css/styling-checkbox-and-radio

Checkbox Checked — Проверка Состояния Чекбокса ✔️

Как передать checkbox

В данной статье мы разберём различные способы проверки состояния чекбоксов. Это необходимо для эффективной работы с элементами форм.

  1. Проверка checkbox на checked — метод .is()
  2. Проверка checkbox/radio на состояние (выбран/не выбран) — метод .

    prop()

    1. Отметить / снять checked
    2. Деактивация чекбокса
  3. Имитация клика по чекбоксу
  4. Найти все выбранные checkbox / radio — селектор :checked
  5. Подсчёт количества выбранных чекбоксов
  6. Запрет отправки формы без выбора чекбокса
  7. Массив значений выбранных чекбоксов
  8. Проверка checkbox на checked на чистом JavaScript

Сначала научимся определять при клике состояние текущего checkbox (checked / unchecked).

HTML

Мы будем использовать jQuery.

$('#checkbox_check').on('click', function () { if ( $(this).is(':checked') ) { // checkbox checked
} else { // checkbox unchecked
} }) Нажми меня

Чекбокс _

Т.о. при клике на чекбокс, мы отлавливаем событие click у текущего checkbox $(this) и с помощью метода .is() мы проверяем наличие псевдокласса :checked.

2. Проверка checkbox/radio на состояние (выбран/не выбран) — метод .prop()

Воспользуемся методом .prop() для проверки состояния checkbox или radio input.

$('#checkbox_check').on('click', function () { let checkboxStatus = $(this).prop('checked') console.log(checkboxStatus) })

Данный код возвращает true или false при нажатии на чекбокс или радио input.

Нажми меня

Состояние чекбокса: _

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

$('#checkbox_check').on('click', function () { if ( $(this).prop('checked', true) ) { // ваш код
} })

2.1 Отметить / снять checked

Также при помощи метода .prop() можно отметить (или снять состояние checked).

// добавим checked
$('#checkbox_check').prop('checked', true) // удалим состояние checked
$('#checkbox_check').prop('checked', false) // добавим состояние checked для всех чекбоксов
$('input:checkbox').prop('checked', true); // удалим checked для всех чекбоксов
$('input:checkbox').prop('checked', false);

2.2 Деактивация чекбокса

Чтобы деактивировать/активировать чекбокс, воспользуйтесь следующим кодом.

// отключаем чекбокс
$('#checkbox_check').prop('disabled', true) // включаем чекбокс
$('#checkbox_check').prop('disabled', false)

3. Имитация клика по чекбоксу

Чтобы имитировать клик по чекбоксу, воспользуйтесь следующим кодом.

$('#checkbox_check').trigger('click');

4. Найти все выбранные checkbox / radio — селектор :checked

При помощи селектора :checked найдём все выбранные checkbox / radio.

Пример с radio input.

HTML CSS JavaScript $('input').on('click', function() { $('#outputField').text('Вы выбрали ' + $('input:checked').val() ); }); HTML CSS JavaScript

Вы выбрали _

Теперь рассмотрим пример с input type=»checkbox», но это также отлично работает и с radio input.

$('input').on('click', function() { $('input:checked').each(function(){ console.log( $(this).val() ) }); }); PHP WordPress

Вы выбрали _

5. Подсчёт количества выбранных чекбоксов

Чтобы узнать количество выбранных checkbox, будем использовать .length.

const myCount = function() { $('#outputField').html( $('.count-checked:checked').length + ' чекбоксов выбрано вами.' ); }; myCount(); $('input').on('click', myCount);

Вы выбрали _ checkbox

6. Запрет отправки формы без выбора чекбокса

Создадим форму, отправить данные которой пользователь сможет только после выбора checkbox.

Структура.

Нажать

Работа с JavaScript. Проверка checkbox на checked.

$('#cheched').on('change', function () { if ( $('#cheched').prop('checked') ) { $('.form__submit').attr('disabled', false); } else { $('.form__submit').attr('disabled', true); } });

Как вы помните из 2 примера, .prop('checked') возвращает true или false — то что нам и нужно.

Результат.

7. Массив значений выбранных чекбоксов

Получим массив значений из выбранных чекбоксов.

$('.array-checked').on('change', function () { const arrayChecked = []; $('.array-checked:checked').each(function() { arrayChecked.push($(this).val()); }); console.log(arrayChecked); });

Значения (value) чекбоксов: _

Возможно вам так же будет интересна статья про стилизацию чекбоксов.

8. Проверка checkbox на checked на чистом JavaScript

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

HTML

JavaScript

document.querySelector('.checkboxClass').addEventListener('change', function () { if ( this.checked ) { console.log('checked') } else console.log('unchecked') }) Чекбокс

Состояние чекбокса: _

admin

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Источник: https://only-to-top.ru/blog/coding/2019-12-22-checkbox-checked.html

elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated, you might see in an official government paper form.

The exact appearance depends upon the operating system configuration under which the browser is running. Generally this is a square but it may have rounded corners.

A checkbox allows you to select single values for submission in a form (or not).

Note: Radio buttons are similar to checkboxes, but with an important distinction — radio buttons are grouped into a set in which only one radio button can be selected at a time, whereas checkboxes allow you to turn single values on and off. Where multiple controls exist, radio buttons allow one to be selected them all, whereas checkboxes allow multiple values to be selected.

Value

A DOMString representing the value of the checkbox. This is never seen on the client-side, but on the server this is the value given to the data submitted with the checkbox's name. Take the following example:

Subscribe to newsletter? Subscribe

In this example, we've got a name of subscribe, and a value of newsletter. When the form is submitted, the data name/value pair will be subscribe=newsletter.

If the value attribute was omitted, the default value for the checkbox is on, so the submitted data in that case would be subscribe=on.

Note: If a checkbox is unchecked when its form is submitted, there is no value submitted to the server to represent its unchecked state (e.g.

value=unchecked); the value is not submitted to the server at all.

If you wanted to submit a default value for the checkbox when it is unchecked, you could include an inside the form with the same name and value, generated by JavaScript perhaps.

Additional attributes

In addition to the common attributes shared by all elements, «checkbox» inputs support the following attributes:

Attribute Description
checkedBoolean; if present, the checkbox is toggled on by default
valueThe string to use as the value of the checkbox when submitting the form, if the checkbox is currently toggled on

checked

A Boolean attribute indicating whether or not this checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (Only the HTMLInputElement’s checked IDL attribute is updated.)

Note: Un other input controls, a checkboxes value is only included in the submitted data if the checkbox is currently checked. If it is, then the value of the checkbox's value attribute is reported as the input's value.

Un other browsers, Firefox by default persists the dynamic checked state of an across page loads. Use the autocomplete attribute to control this feature.

value

The value attribute is one which all s share; however, it serves a special purpose for inputs of type checkbox: when a form is submitted, only checkboxes which are currently checked are submitted to the server, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is demonstrated in the section Value above.

Using checkbox inputs

We already covered the most basic use of checkboxes above. Let's now look at the other common checkbox-related features and techniques you'll need.

Handling multiple checkboxes

The example we saw above only contained one checkbox; in real-world situations you'll be ly to encounter multiple checkboxes. If they are completely unrelated, then you can just deal with them all separately, as shown above. However, if they're all related, things are not quite so simple.

For example, in the following demo we include multiple checkboxes to allow the user to select their interests (see the full version in the Examples section).

Choose your interests Coding Music

In this example you will see that we've given each checkbox the same name. If both checkboxes are checked and then the form is submitted, you'll get a string of name/value pairs submitted this: interest=coding&interest=music.

When this string reaches the server, you need to parse it other than as an associative array, so all values, not only the last value, of interest are captured.

For one technique used with PHP, see Handle Multiple Checkboxes with a Single Serverside Variable, for example.

Checking boxes by default

To make a checkbox checked by default, you simply give it the checked attribute. See the below example:

Choose your interests Coding Music

Providing a bigger hit area for your checkboxes

In the above examples, you may have noticed that you can toggle a checkbox by clicking on its associated element as well as on the checkbox itself. This is a really useful feature of HTML form labels that makes it easier to click the option you want, especially on small-screen devices smartphones.

Beyond accessibility, this is another good reason to properly set up elements on your forms.

Indeterminate state checkboxes

In addition to the checked and unchecked states, there is a third state a checkbox can be in: indeterminate. This is a state in which it's impossible to say whether the item is toggled on or off. This is set using the HTMLInputElement object's indeterminate property via JavaScript (it cannot be set using an HTML attribute):

inputInstance.indeterminate = true;

A checkbox in the indeterminate state has a horizontal line in the box (it looks somewhat a hyphen or minus sign) instead of a check/tick in most browsers.

There are not many use cases for this property. The most common is when a checkbox is available that «owns» a number of sub-options (which are also checkboxes).

If all of the sub-options are checked, the owning checkbox is also checked, and if they're all unchecked, the owning checkbox is unchecked.

If any one or more of the sub-options have a different state than the others, the owning checkbox is in the indeterminate state.

This can be seen in the below example (thanks to CSS Tricks for the inspiration). In this example we keep track of the ingredients we are collecting for a recipe. When you check or uncheck an ingredient's checkbox, a JavaScript function checks the total number of checked ingredients:

  • If none are checked, the recipe name's checkbox is set to unchecked.
  • If one or two are checked, the recipe name's checkbox is set to indeterminate.
  • If all three are checked, the recipe name's checkbox is set to checked.

So in this case the indeterminate state is used to state that collecting the ingredients has started, but the recipe is not yet complete.

var overall = document.querySelector('input[id=»EnchTbl»]'); var ingredients = document.querySelectorAll('ul input'); overall.addEventListener('click', function(e) { e.preventDefault(); }); for(var i = 0; i < ingredients.length; i++) { ingredients[i].addEventListener('click', updateDisplay); } function updateDisplay() { var checkedCount = 0; for(var i = 0; i < ingredients.length; i++) { if(ingredients[i].checked) { checkedCount++; } } if(checkedCount === 0) { overall.checked = false; overall.indeterminate = false; } else if(checkedCount === ingredients.length) { overall.checked = true; overall.indeterminate = false; } else { overall.checked = false; overall.indeterminate = true; } }

Note: If you submit a form with an indeterminate checkbox, the same thing happens as if the checkbox were unchecked — no data is submitted to represent the checkbox.

Validation

Checkboxes do support validation (offered to all s). However, most of the ValidityStates will always be false. If the checkbox has the required attribute, but is not checked, then ValidityState.valueMissing will be true.

Examples

The following example is an extended version of the «multiple checkboxes» example we saw above — it has more standard options, plus an «other» checkbox that when checked causes a text field to appear to enter a value for the «other» option. This is achieved with a simple block of JavaScript. The example also includes some CSS to improve the styling.

HTML

Choose your interests Coding Music Art Sports Cooking Other Submit form

CSS

html { font-family: sans-serif;} form { width: 600px; margin: 0 auto;} div { margin-bottom: 10px;} fieldset { background: cyan; border: 5px solid blue;} legend { padding: 10px; background: blue; color: cyan;}

JavaScript

var otherCheckbox = document.querySelector('input[value=»other»]');var otherText = document.querySelector('input[id=»otherValue»]');otherText.style.visibility = 'hidden'; otherCheckbox.

addEventListener('change', () => { if(otherCheckbox.checked) { otherText.style.visibility = 'visible'; otherText.value = ''; } else { otherText.style.

visibility = 'hidden'; }});

Browser compatibility

Update compatibility data on GitHub

DesktopMobileChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internettype=»checkbox»
Chrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Full support   Full support

See also

Источник: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

Делаем просто
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: