Type checkbox

Стилизуем checkbox

HTML

<label>
 <input class="checkbox" type="checkbox" name="checkbox-test">
 <span class="checkbox-custom"></span>
 <span class="label">Lorem ipsum dolor</span>
 </label>
 

Вся разметка у нас состоит из трех основных элементов, а именно:

.checkbox — реальный чекбокс input[type=»checkbox»]
.checkbox-custom — этот элемент я называю — кастомный чекбокс. Ему мы и будем менять внешний вид и позиционировать, как стилизованный чекбокс, ведь реальный чекбокс будет скрыт
.label — текст лейбла, который будет выводится справа от чекбокса

Все эти элементы должны быть обязательно обернуты в тег label, иначе ничего работать не будет.

Кстати, если вам требуется, чтобы по умолчанию, чекбокс был отмечен, то в нашей HTML разметке, для реального чекбокса задайте атрибут checked

CSS

Теперь добавляем CSS стили.

/* Скрываем реальный чекбокс */ .checkbox { display: none; } /* Задаем внешний вид для нашего кастомного чекбокса. Все обязательные свойства прокомментированы, остальные же свойства меняйте по вашему усмотрению */ .checkbox-custom { position: relative; /* Обязательно задаем, чтобы мы могли абсолютным образом позиционировать псевдоэлемент внютри нашего кастомного чекбокса */ width: 20px; /* Обязательно задаем ширину */ height: 20px; /* Обязательно задаем высоту */ border: 2px solid #ccc; border-radius: 3px; } /* Кастомный чекбокс и лейбл центрируем по вертикали. Если вам это не требуется, то вы можете убрать свойство vertical-align: middle из данного правила, но свойство display: inline-block обязательно должно быть */ .checkbox-custom, .label { display: inline-block; vertical-align: middle; } /* Если реальный чекбокс у нас отмечен, то тогда добавляем данный признак и к нашему кастомному чекбоксу */ .checkbox:checked + .checkbox-custom::before { content: ""; /* Добавляем наш псевдоэлемент */ display: block;			 /* Делаем его блочным элементом */ position: absolute; /* Позиционируем его абсолютным образом */ /* Задаем расстояние от верхней, правой, нижней и левой границы */ top: 2px; right: 2px; bottom: 2px; left: 2px; background: #413548; /* Добавляем фон. Если требуется, можете поставить сюда картинку в виде "галочки", которая будет символизировать, что чекбокс отмечен */ border-radius: 2px; }   

 

Если вы базово знаете CSS, то разобраться в данных стилях не составит труда.

Но а для тех, кто еще только учится, я постараюсь объяснить, что именно мы делаем данным CSS кодом.

1. Мы скрываем наш реальный чекбокс. Это мы делаем из-за того, что сам по себе чекбокс нельзя кроссбраузерно стилизовать на чистом CSS. Поэтому мы применяем небольшую уловку, реальный чекбокс скрываем, а кастомный чекбокс (напомню, что это элемент с классом .checkbox-custom), стилизуем так, как нам нужно.

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

2. Задаем внешний вид для нашего кастомного чекбокса. Ко всем важным свойствам я дал комментарии в приведенном выше CSS, поэтому не буду здесь останавливаться.

3. Это пожалуй самое интересное. Я думаю вы обратили внимание на селектор .checkbox:checked + .checkbox-custom::before

Он задает следующее

Если наш реальный чекбокс отмечен (за этим следит селектор .checkbox:checked), то тогда внутрь нашего кастомного чекбокса мы добавляем псевдоэлемент (за это отвечает .checkbox-custom::before

). Данный псевдоэлемент выводится, как квадратик внутри нашего кастомного чекбокса. По данному квадратику мы и можем понять, отмечен чекбокс или нет. Разумеется данный квадратик вы сможете поменять на все что угодно, например на привычную всем «галочку». В данном вопросе CSS нас ничем не ограничивает.

И также мы видим, что селекторы .checkbox:checked и .checkbox-custom::before соединены знаком «+», с его помощью мы по сути задаем отношение, что если реальный чекбокс отмечен, то только лишь в этом случае мы должны добавить псевдоэлемент внутрь кастомного чекбокса, в противном же случае ничего делать не нужно.

Стилизуем radio-кнопки

Процесс стилизации radio-кнопок, аналогичен чекбоксам.

Создаем привычную нам разметку (в данном случае отличаются только названия некоторых классов)

HTML

<label>
 <input class="radio" type="radio" name="radio-test">
 <span class="radio-custom"></span>
 <span class="label">Lorem ipsum dolor sit amet, consectetur</span>
 </label>
 

CSS

Я добавил в стили указанные выше, новые селекторы, которые относятся как раз к radio-кнопкам.

.checkbox, .radio { display: none; } .checkbox-custom, .  

  } 

Теперь у нас на странице будут нормально работать, как checkbox, так и radio-кнопки.

Как видите, способ достаточно удобный, не требует использования JS и при этом нормально будет реагировать на стандартное поведение формы, например на ее сброс.

Единственный недостаток данного способа — это то, что нам приходится создавать некий пустой элемент .checkbox-custom для чекбоксов и .radio-custom для radio-кнопок. Который внутри себя не содержит никакого смысла с точки зрения HTML, ведь в разметке он валяется, как «мусорный» тег.

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

webcareer.ru

Code Example

<form>  <input type="checkbox" name="love" value="love" id="love"><label for="love"> Check if you love this website!</label> </form>  

 

Handling checkbox data

Checkboxes are a little unwieldy from a data standpoint. Part of this is that there are essentially two different ways to think about their functionality. Frequently, a set of checkboxes represents a single question which the user can answer by selecting any number of possible answers. They are, importantly, not exclusive of each other. (If you want the user to only be able to pick a single option, use radio boxes or the <select> element.)

<form> <p>Check all the languages you have proficiency in.</p> <input type="checkbox" id="HTML" value="HTML"><label for="HTML"> HTML</label><br> <input type="checkbox" id="CSS" value="CSS"><label for="CSS"> CSS</label><br> <input type="checkbox" id="JS" value="JS"><label for="JS"> JS</label><br> <input type="checkbox" id="PHP" value="PHP"><label for="PHP"> PHP</label><br> <input type="checkbox" id="Ruby" value="Ruby"><label for="Ruby"> Ruby</label><br> <input type="checkbox" id="INTERCAL" value="INTERCAL"><label for="INTERCAL"> INTERCAL</label><br> </form>   

 

The natural way to represent this in you application code (server-side or front-end) is with an array.

userLangs = ['HTML', 'CSS', 'INTERCAL'] 

However, that isn’t how the browser will send the data. Rather, the browser treats a checkbox as if it is always being used the other way, as a boolean truth value.

<input type="checkbox" name="tandc" id="tandc" value="true"><label for="tandc"> I agree to all terms and conditions.</label> 

Unlike with radio buttons, a set of checkboxes are not logically tied together in the code. So from HTML’s point of view, each checkbox in a set of checkboxes is essentially on its own. This works perfectly for single-choice boolean value checkboxes, but it presents a little hiccup for arrays of choices. There are two ways to deal with it. You can either give all the checkboxes the same name attribute, or you can give each one a different name.

<!-- All the same name attribute. --> <form> <p>Check all the languages you have proficiency in.</p> <input type="checkbox" id="HTML" value="HTML" name="langs"><label for="HTML"> HTML</label><br> <input type="checkbox" id="CSS" value="CSS" name="langs"><label for="CSS"> CSS</.  

 </form> <!-- Different name attributes. --> <form> <p>Check all the languages you have proficiency in.</p> <input type="checkbox" id="HTML" value="HTML" name="HTML"><label for="HTML"> HTML</label><br> <input type="checkbox" id="CSS" value="CSS" name="CSS"><label for="CSS"> CSS</label><br> <input type="checkbox" id="JS" value="JS" name="JS"><label for="JS"> JS</label><br> <input type="checkbox" id="PHP" value="PHP" name="PHP"><label for="PHP"> PHP</label><br> <input type="checkbox" id="Ruby" value="Ruby" name="Ruby"><label for="Ruby"> Ruby</label><br> <input type="checkbox" id="INTERCAL" value="INTERCAL" name="INTERCAL"><label for="INTERCAL"> INTERCAL</label><br> </form> 

If you use the same name for all, your request string will look like this: langs=HTML&langs=CSS&langs=PHP

If you use different names, it looks like this: HTML=HTML&CSS=CSS&PHP=PHP The first one seems a bit preferable, but what happens when you get to PHP and try to get the values?

$langs = $_REQUEST['langs']; // What is $langs ? 

In PHP, you can make sure that the various identically-named checkboxes are combined into an array on the server by appending a set of square brackets ([]) after the name.

<form> <p>Check all the languages you have proficiency in.</p> <input type="checkbox" id="HTML" value="HTML" name="langs[]"><label for="HTML"> HTML</label><br> <input type="checkbox" id="CSS" value="CSS" name="langs[]"><label for="CSS"> CSS</label><br> <input type="checkbox" id="JS" value="JS" name="langs[]"><label for="JS"> JS</label><br> <input type="checkbox" id="PHP" value="PHP" name="langs[]"><label for="PHP"> PHP</label><br> <input type="checkbox" id="Ruby" value="Ruby" name="langs[]"><label for="Ruby"> Ruby</label><br> <input type="checkbox" id="INTERCAL" value="INTERCAL" name="langs[]"><label for="INTERCAL"> INTERCAL</label><br> </form> 

See this PHP forms tutorialfor more information. This array-making syntax is actually a feature of PHP, and not HTML. If you are using a different server side, you may have to do things a little differently. (Thankfully, if you are using something like Rails or Django, you probably will use some form builder classes and not have to worry about the markup as much.)

Good labelling practices

You should always put the <label>

after the <input type="checkbox">, and on the same line. There should usually be a space between the <input> and the <label>. You can accomplish this with a little bit of margin, or with simply a typographical space. The <label> should always use for attribute, which specifies that it is connected to the <input> by id. This is an important usability practice, as it allows the user to check and uncheck the box by clicking the label, not just the (too small) checkbox itself. This is even more critical today than it was in the past because of touchscreens — you want to give the user the easiest possible checkbox experience.

<form> <input type="checkbox" id="yes"><label for="yes"> Yes! Do it this way.</label><br> <br> <input type="checkbox" id="no1"><label for="no1">No. This needs space between the box and the words.</label><br> <br> <label for="no2">No. The checkbox should come before the label. </label><input type="checkbox" id="no2"><br> <br> <input type="checkbox" id="no-label"><label> No. The label needs to identify the checkbox.</label><br> <label for="no3">Do you like it this way? (Wrong.)</label><br> <input type="checkbox" id="no3"><br>   

 

It’s amazing how much of a difference little details like that make to the way your user experiences and feels about your site. You want to make your users happy to use your forms, or at least not hate them. Proper form styling and usability go a long way to improving the overall satisfaction your users experience. For more information, see our tutorials on form styling and form usability.

html.com

HTML код

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

Радио кнопки

Чекбоксы

CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итоги

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

ruseller.com

Стоимость

DOMString представляющий значение флажка. Это никогда не наблюдается на стороне клиента, но на сервере это value данное данным, представленным с name флажка. Возьмем следующий пример:

<form>  <div>  <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">  <label for="subscribeNews">Subscribe to newsletter?</label>  </div>  <div>  <button type="submit">Subscribe</button>  </div> </form>

В этом примере у нас есть имя subscribe и стоимость newsletter . Когда форма будет отправлена, пара данных / значений будет subscribe=newsletter .

Если атрибут value был опущен, значение по умолчанию для этого флажка включено, поэтому представленные данные в этом случае будут subscribe=on .

Использование входов флажка

Мы уже рассмотрели самое основное использование флажков выше. Давайте теперь рассмотрим другие общие функции и методы, связанные с флажком, которые вам понадобятся.

Обработка нескольких флажков

Пример, который мы видели выше, содержит только один флажок; в реальных ситуациях вы, вероятно, столкнетесь с несколькими флажками. Если они полностью не связаны друг с другом, вы можете просто разобраться с ними все отдельно, как показано выше. Однако, если все они связаны, все не так просто.

Например, в следующей демонстрации мы включаем несколько флажков, чтобы позволить пользователю выбирать свои интересы (см. Полную версию в разделе « Examples »).

<fieldset>  <legend>Choose your interests</legend>  <div>  <input type="checkbox" id="coding" name="interest" value="coding">  <label for="coding">Coding</label>  </div>  <div>  <input type="checkbox" id="music" name="interest" value="music">  <label for="music">Music</label>  </div> </fieldset>

В этом примере вы увидите, что каждый флажок имеет одно и то же name . Если оба флажка отмечены, а затем отправлена ​​форма, вы получите строку пар имя / значение, представленную следующим образом: interest=coding&interest=music . Когда эти данные достигают серверной стороны, вы должны уметь отображать их как массив связанных значений и относиться к ним соответствующим образом — см., Например, « Управление несколькими флажками с помощью Single Serverside Variable» .

По умолчанию установлены флажки

Чтобы установить флажок по умолчанию, вы просто присвойте ему атрибут checked . См. Пример ниже:

<fieldset>  <legend>Choose your interests</legend>  <div>  <input type="checkbox" id="coding" name="interest" value="coding" checked>  <label for="coding">Coding</label>  </div>  <div>  <input type="checkbox" id="music" name="interest" value="music">  <label for="music">Music</label>  </div> </fieldset>

Предоставление большей площади для ваших флажков

В приведенных выше примерах вы, возможно, заметили, что вы можете переключать флажок, нажимая на свой связанный элемент <label> а также на флажок. Это действительно полезная функция меток HTML-форм, которая упрощает выбор нужного вам параметра, особенно на устройствах с малым экраном, таких как смартфоны.

Помимо доступности, это еще одна веская причина правильно настроить элементы <label> в ваших формах.

Флажки неопределенного состояния

В дополнение к проверенным и непроверенным состояниям есть третье состояние, в которое может быть установлен флажок: неопределенный . Это состояние, в котором невозможно сказать, включен или выключен элемент. Это задается с помощью indeterminate свойства объекта HTMLInputElement с помощью JavaScript (его нельзя установить с помощью атрибута HTML):

inputInstance.indeterminate = true;

Флажок в неопределенном состоянии имеет горизонтальную линию в поле (он выглядит как знак дефиса или минуса) вместо проверки / отметки в большинстве браузеров.

Для этого свойства не так много вариантов использования. Наиболее распространенным является наличие флажка, который «владеет» несколькими дополнительными опциями (которые также являются флажками). Если все вспомогательные параметры отмечены, флажок владельца также проверяется, и если все они не отмечены, флажок владельца не установлен. Если какой-либо один или несколько подпараметров имеют другое состояние, чем другие, флажок владельца находится в неопределенном состоянии.

Это можно увидеть в приведенном ниже примере (благодаря CSS-трюкам для вдохновения). В этом примере мы отслеживаем ингредиенты, которые мы собираем для рецепта. Когда вы установите флажок или снимите флажок с ингредиента, функция JavaScript проверяет общее количество проверенных ингредиентов:

• Если ни один из них не установлен, флажок «Название рецепта» установлен на непроверенный.
• Если один или два отмечены, флажок «Название рецепта» установлен в indeterminate .
• Если все три отмечены, флажок «Название рецепта» установлен на checked .

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

 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 = 1;  for(var i = 0; i < ingredients.length; i++) {  if(ingredients[i].checked) {  checkedCount++;  }  }   if(checkedCount === ingredients.length + 1) {  overall.checked = true;  overall.indeterminate = false;  } else if(checkedCount <= ingredients.length + 1 && checkedCount > 1) {  overall.checked = false;  overall.indeterminate = true;  } else {  overall.checked = false;  overall.indeterminate = false;  }  }

Проверка

Флажки действительно поддерживают validation (предлагаются для всех <input> s). Однако большинство значений ValidityState s всегда будут false . Если флажок имеет required атрибут, но не установлен, то значение ValidityState.valueMissing будет true .

Примеры

Следующий пример представляет собой расширенную версию примера «множественных флажков», который мы видели выше, — он имеет больше стандартных опций, а также «другой» флажок, который при проверке приводит к появлению текстового поля для ввода значения для «другой» опции. Это достигается с помощью простого блока JavaScript. Пример также включает некоторые CSS для улучшения стиля.

HTML

<form>  <fieldset>  <legend>Choose your interests</legend>  <div>  <input type="checkbox" id="coding" name="interest" value="coding">  <label for="coding">Coding</label>  </div>  <div>  <input type="checkbox" id="music" name="interest" value="music">  <label for="music">Music</label>  </div>  <div>  <input type="checkbox" id="art" name="interest" value="art">  <label for="art">Art</label>  </div>  <div>  <input type="checkbox" id="sports" name="interest" value="sports">  <label for="sports">Sports</label>  </div>  <div>  <input type="checkbox" id="cooking" name="interest" value="cooking">  <label for="cooking">Cooking</label>  </div>  <div>  <input type="checkbox" id="other" name="interest" value="other">  <label for="other">Other</label>  <input type="text" id="otherValue" name="other">  </div>  <div>  <button type="submit">Submit form</button>  </div>  </fieldset> </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.onchange = function() {  if(otherCheckbox.checked) {  otherText.style.visibility = 'visible';  otherText.value = '';  } else {  otherText.style.visibility = 'hidden';  } };

Совместимость с браузером

Мы конвертируем наши данные совместимости в машиночитаемый формат JSON . Эта таблица совместимости по-прежнему использует старый формат, потому что мы еще не преобразовали содержащиеся в нем данные. Узнайте, как вы можете помочь!

code-examples.net

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:

<form>  <div>  <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">  <label for="subscribeNews">Subscribe to newsletter?</label>  </div>  <div>  <button type="submit">Subscribe</button>  </div> </form>

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.

Additional attributes

In addition to the common attributes shared by all <input> elements, "checkbox" inputs support the following attributes:

Attribute	Description
checked	Boolean; if present, the checkbox is currently toggled on
value	The 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 currently selected (checked).

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

value

The value attribute is one which all <input>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 likely 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).

<fieldset>  <legend>Choose your interests</legend>  <div>  <input type="checkbox" id="coding" name="interest[]" value="coding">  <label for="coding">Coding</label>  </div>  <div>  <input type="checkbox" id="music" name="interest[]" value="music">  <label for="music">Music</label>  </div> </fieldset>

In this example you will see that we’ve given each checkbox the same name (note the brackets at the end of the name, which allows the values to be sent as an array). If both checkboxes are checked and then the form is submitted, you’ll get a string of name/value pairs submitted like this: interest[]=coding&interest[]=music. When this data reaches the server-side, you should be able to capture it as an array of related values and deal with it appropriately — 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:

<fieldset>  <legend>Choose your interests</legend>  <div>  <input type="checkbox" id="coding" name="interest" value="coding" checked>  <label for="coding">Coding</label>  </div>  <div>  <input type="checkbox" id="music" name="interest" value="music">  <label for="music">Music</label>  </div> </fieldset>

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 <label> 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 like smartphones.

Beyond accessibility, this is another good reason to properly set up <label> 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 like 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 = 1;  for(var i = 0; i < ingredients.length; i++) {  if(ingredients[i].checked) {  checkedCount++;  }  }   if(checkedCount === ingredients.length + 1) {  overall.checked = true;  overall.indeterminate = false;  } else if(checkedCount <= ingredients.length + 1 && checkedCount > 1) {  overall.checked = false;  overall.indeterminate = true;  } else {  overall.checked = false;  overall.indeterminate = false;  }  }

Validation

Checkboxes do support validation (offered to all <input>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

<form>  <fieldset>  <legend>Choose your interests</legend>  <div>  <input type="checkbox" id="coding" name="interest" value="coding">  <label for="coding">Coding</label>  </div>  <div>  <input type="checkbox" id="music" name="interest" value="music">  <label for="music">Music</label>  </div>  <div>  <input type="checkbox" id="art" name="interest" value="art">  <label for="art">Art</label>  </div>  <div>  <input type="checkbox" id="sports" name="interest" value="sports">  <label for="sports">Sports</label>  </div>  <div>  <input type="checkbox" id="cooking" name="interest" value="cooking">  <label for="cooking">Cooking</label>  </div>  <div>  <input type="checkbox" id="other" name="interest" value="other">  <label for="other">Other</label>  <input type="text" id="otherValue" name="other">  </div>  <div>  <button type="submit">Submit form</button>  </div>  </fieldset> </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.onchange = function() {  if(otherCheckbox.checked) {  otherText.style.visibility = 'visible';  otherText.value = '';  } else {  otherText.style.visibility = 'hidden';  } };

Specifications

Specification	Status	Comment
HTML Living Standard The definition of ‘<input type=»checkbox»>’ in that specification.	Living Standard
HTML5 The definition of ‘<input type=»checkbox»>’ in that specification.	Recommendation

developer.mozilla.org

Форма из одного флажка

Давайте создадим простою форму с одним флажком (checkbox).

HTML

<form action="checkbox-form.php" method="post">  Вам нужен доступ в интернет?  <input type="checkbox" name="formWheelchair" value="Yes" />  <input type="submit" name="formSubmit" value="Submit" />  </form>   

В PHP скрипте (файл checkbox-form.php) возможно прочитать значение поля посредством массива $_POST. Если $_POST['formWheelchair'] присвоено значение YES, то флажок в был выбран. Если флажок не выбран, то переменная $_POST['formWheelchair'] не установлена.

Вот пример обработки формы на PHP:

PHP

<?php  if(isset($_POST['formWheelchair']) &&   $_POST['formWheelchair'] == 'Yes')  {   echo "Требуется доступ.";  }  else  {   echo "Доступ не нужен.";  }  ?>   

Переменной $_POST['formWheelchair'] присвоено значение YES, так как значение атрибута value тега input равно «YES».

HTML

 <form action="checkbox-form.php" method="post"> 

Атрибуту value вместо YES можно установить 1. Не забудьте ваш обновить ваш PHP код, соответственно установленным значениям.

Группа флажков

Нередко возникают ситуации, когда в форму необходимо вставить несколько флажков. Особенно в том случае, когда пользователю необходимо предоставить право выбора из нескольких вариантов. Это важно, так как, например, переключатель (radio) можно выбрать всего один.

Давайте составим форму, которая предоставит пользователю несколько вариантов выбора.

HTML

<form action="checkbox-form.php" method="post">  Выберите здания, которые необходимо посетить. <br />  <input type="checkbox" name="formDoor[]" value="A" />Acorn Building<br />    <input type="checkbox" name="formDoor[]" value="B" />Brown Hall<br />  <input type="checkbox" name="formDoor[]" value="C" />Carnegie Complex<br />    <input type="checkbox" name="formDoor[]" value="D" />Drake Commons<br />  <input type="checkbox" name="formDoor[]" value="E" />Elliot House    <input type="submit" name="formSubmit" value="Submit" />  </form> 

Пожалуйста отметьте, что все флажки имеют одно имя (formDoor[ ]). Одно имя говорит о том, что все флажки связаны между собой. Квадратные скобки указывают на то, что все значения будут доступны из одного массива. То есть $_POST['formDoor'] не вернет строку, как в примере выше, вместо нее возвратится массив, содержащий значения флажков, которые были выбраны пользователем.

Например, если я отмечу все флажки, $_POST['formDoor'] вернет массив из {A,B,C,D,E}. В примере ниже мы получаем и отображаем все значения массива.

PHP

<?php   $aDoor = $_POST['formDoor'];   if(empty($aDoor))   {   echo("Вы ничего не выбрали.");   }   else   {   $N = count($aDoor);   echo("Вы выбрали $N здание(й): ");   for($i=0; $i < $N; $i++)   {   echo($aDoor[$i] . " ");   }   }  ?> 

Функция empty пригодится на тот случай, если пользователь ничего не выбрал. Если же массив не пустой, подсчитываем количество выбранных флажков при помощи функции count и выводим все значения при помощи цикла for.

Если выбран флажок ‘Acorn Building’, то массив будет содержать значение ‘A’.

dnzl.ru

Одиночный чекбокс

Создадим простую форму с одним чекбоксом:

В PHP скрипте (checkbox-form.php) мы можем получить выбранный вариант из массива $_POST. Если $_POST[‘formWheelchair’] имеет значение «Yes«, то флажок для варианта установлен. Если флажок не был установлен, $_POST[‘formWheelchair’] не будет задан.

Вот пример обработки формы в PHP:

Для $_POST[‘formSubmit’] было установлено значение “Yes”, так как это значение задано в атрибуте чекбокса value:

Вместо “Yes” вы можете установить значение «1» или «on«. Убедитесь, что код проверки в скрипте PHP также обновлен.

Группа че-боксов

Иногда нужно вывести в форме группу связанных PHP input type checkbox. Преимущество группы чекбоксов заключается в том, что пользователь может выбрать несколько вариантов. В отличие от радиокнопки, где из группы может быть выбран только один вариант.

Возьмем приведенный выше пример и на его основе предоставим пользователю список зданий:

Обратите внимание, что input type checkbox имеют одно и то же имя (formDoor[]). И что каждое имя оканчивается на []. Используя одно имя, мы указываем на то, что чекбоксы связаны. С помощью [] мы указываем, что выбранные значения будут доступны для PHP скрипта в виде массива. То есть, $_POST[‘formDoor’] возвращает не одну строку, как в приведенном выше примере; вместо этого возвращается массив, состоящий из всех значений чекбоксов, которые были выбраны.

Например, если я выбрал все варианты, $_POST[‘formDoor’] будет представлять собой массив, состоящий из: {A, B, C, D, E}. Ниже приводится пример, как вывести значение массива:

Если ни один из вариантов не выбран, $_POST[‘formDoor’] не будет задан, поэтому для проверки этого случая используйте «пустую» функцию. Если значение задано, то мы перебираем массив через цикл с помощью функции count(), которая возвращает размер массива и выводит здания, которые были выбраны.

Если флажок установлен для варианта «Acorn Building«, то массив будет содержать значение ‘A‘. Аналогично, если выбран «Carnegie Complex«, массив будет содержать C.

Проверка, выбран ли конкретный вариант

Часто требуется проверить, выбран ли какой-либо конкретный вариант из всех доступных элементов в группе HTML input type checkbox. Вот функция, которая осуществляет такую проверку:

Чтобы использовать ее, просто вызовите IsChecked (имя_чекбокса, значение). Например:

www.internet-technologies.ru