Чекбокс checkbox

Расположение

В общем случае группа чекбоксов должна располагаться в 1 столбец. В списке чекбоксов, размещенных горизонтально или в несколько столбцов тяжелее ориентироваться, потому что не всегда очевидна граница группы.

Разбивать чекбоксы на несколько столбцов можно, если это разделение логически обосновано и понятно пользователю.

Группа из одного чекбокса требует аккуратного обращения при верстке формы.

Один чекбокс сразу с двумя подписями выглядит странно:

Чекбокс без названия выглядит уже недопустимо, к тому же в него сложнее целиться:

Если чекбокс поставить в колонку с полями, они будут воспринимается связанными по смыслу, хотя это не так:

Такой проблемы нет, если форма верстается в одну колонку:

Чтобы решить проблему при двухколоночной компоновке, одиночный чекбокс можно заменить на группу радиокнопок:

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

Если чекбокс связан по смыслу с другим элементом формы, их можно группировать:

Примеры стилизации флажков с ресурса codepen.io

Как работает стилизация

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

See the Pen Delightful Checkbox Animation by Dylan Raga (@dylanraga) on CodePen.18892

Близкие к стандартным варианты флажков, переключателей и выпадающих списков от Kenan Yusuf

See the Pen Completely CSS: Custom checkboxes, radio buttons and select boxes by Kenan Yusuf (@KenanYusuf) on CodePen.18892

Подсветка текста label + анимация выбора чекбокса от Adam Quinlan

Перекатывающийся шарик от Jon Kantner

Вариант 1

See the Pen Toy Toggle Switch by Jon Kantner (@jkantner) on CodePen.18892

Вариант 2 со скрепкой

See the Pen Paper Clip Toggle Switch by Jon Kantner (@jkantner) on CodePen.18892

Карандаш для отметки выбора флажка

Еще один вариант анимации от Jon Kantner, но с появлением карандаша. Отличное решение для тестов, например.

See the Pen Pencil and Paper Checkboxes by Jon Kantner (@jkantner) on CodePen.18892

Меняем цветовую схему переключателем

Автор Jon Kantner предлагает вашему вниманию вариант кода, при котором клик на чекбоксе меняет цвет фона.

Вариант 1

See the Pen Toggle Switch with Rolling Label by Jon Kantner (@jkantner) on CodePen.18892

Вариант 2

See the Pen Light/Dark Mode Toggle With Curtain Effect by Jon Kantner (@jkantner) on CodePen.18892

Multiple choices

So far, all our checkboxes have been simple switches, e.g. for defining whether an option is on or off. Checkboxes are great for that, but as mentioned, they can also be used to allow the user a selection of possible options. Let me show you a neat example where this makes sense:

Notice how we now have multiple checkboxes, but they all share the same name («favorite_pet») but different values (e.g. «Dogs»). When this form is submitted back to the server, all these checkboxes will be represented by a single name, but the value will be an array of 0-3 items. If you had used radio buttons instead of checkboxes, the user would only be allowed to pick a single favorite animal, but with checkboxes, they can select none of them, all of them or some of them.

Кнопки переключения

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

Кнопки переключения флажков

Одиночный переключатель

Выбранный

Отключенный

Визуально эти кнопки переключения флажков идентичны . Однако вспомогательные технологии передают их по-другому: переключатели флажков будут объявлены программами чтения с экрана как “отмеченные”/“не отмеченные” (поскольку, несмотря на их внешний вид, они по сути остаются флажками), тогда как кнопки переключения плагинов кнопок будут объявляется как “кнопка”/“кнопка нажата”. Выбор между этими двумя подходами будет зависеть от типа создаваемого вами переключателя, а также от того, будет ли этот переключатель иметь смысл для пользователей, когда он будет объявлен как флажок или как фактическая кнопка.

Выбранная

Радио

Отключенная

Радио

Стиль контура

Поддерживаются различные варианты , например, в различных выделенных стилях.

Одиночный переключательВыбранныйВыбранный радио цвета success

Радио цвета danger

How To Create a Custom Checkbox

Step 1) Add HTML:

<label class=»container»>One  <input type=»checkbox»
checked=»checked»>  <span class=»checkmark»></span></label><label class=»container»>Two  <input type=»checkbox»> 
<span class=»checkmark»></span></label>
<label class=»container»>Three  <input type=»checkbox»> 
<span class=»checkmark»></span></label><label class=»container»>Four 
<input type=»checkbox»>  <span class=»checkmark»></span></label>

Step 2) Add CSS:

/* Customize the label (the container) */.container {  display: block; 
position: relative;  padding-left: 35px;  margin-bottom:
12px;  cursor: pointer;  font-size: 22px;  -webkit-user-select:
none;  -moz-user-select: none;  -ms-user-select: none; 
user-select: none;}/* Hide the
browser’s default checkbox */.container input {  position: absolute; 
opacity: 0;  cursor: pointer;  height: 0;  width:
0;
}/* Create a custom checkbox */.checkmark {  position:
absolute;  top: 0;  left: 0;  height: 25px; 
width: 25px;  background-color: #eee;}/* On mouse-over, add a grey background color */.container:hover
input ~ .checkmark {  background-color: #ccc;}/* When the
checkbox is checked, add a blue background */.container input:checked ~
.checkmark {  background-color: #2196F3;}/* Create the
checkmark/indicator (hidden when not checked) */.checkmark:after { 
content: «»;  position: absolute;  display: none;}/* Show the
checkmark when checked */.container input:checked ~ .checkmark:after { 
display: block;}/* Style the checkmark/indicator */.container
.checkmark:after {  left: 9px;  top: 5px;  width:
5px;  height: 10px;  border: solid white; 
border-width: 0 3px 3px 0;  -webkit-transform: rotate(45deg); 
-ms-transform: rotate(45deg);  transform: rotate(45deg);}

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

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

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

HTML разметка:

<label class="custom-checkbox">
  <input type="checkbox" value="value-1">
  <span>Indigo</span>
</label>

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. Стилизация , когда расположен в .

HTML разметка:

<label class="custom-radio">
  <input type="radio" name="color" value="indigo">
  <span>Indigo</span>
</label>

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;
}

Методы, унаследованные от класса Control

Объект переключатель в javascript — radio и свойство checked

Элемент javascript предназначен для выбора только одного единственного варианта из нескольких.

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

Рассмотрим пример использования радиокнопок:
html-код:

<body>
<form name="f1">
Ваш пол:<br>
<input type="radio" name="r1" id="id1">м<br>
<input type="radio" name="r1" id="id2">ж<br>
<input type="button" onclick="fanc()">
<form>
<body>

Группа радиокнопок (radio) идентифицируется в скрипте следующим образом:
Скрипт:

function fanc(){
  document.getElementById("id1").checked=true;    
  document.f1.r1.checked=true;
  document.f1'r1'.checked=true;		
}

Первый способ является наиболее предпочтительным.

Рассмотрим пример использования в javascript с свойством:

Пример: По щелчку на кнопке устанавливать первый переключатель отмеченным

Скрипт:

function fanc(){
	document.f1.r1.checked=true;
}

HTML-код:

<form name="f1">
<input type="radio"   name="r1">пункт1<br>
<input type="radio"   name="r1">пункт1<br>
<input type="button" onClick ="fanc()" value="отметить">
<form>

Задание js12_2.
Создать страницу проверки знаний учащегося с вопросом: «Какой заряд у электрона?» и двумя ответами: «положительный» (неправильный) и «отрицательный» (правильный). Осуществить проверку правильности отмеченного при помощи элемента формы ответа. Функцию проверки запускать

Советы, как правильно использовать чекбокс

1. Не перемудрите и используйте стандартный вид чекбокса

Традиционно чекбоксы имеют квадратную форму

Пользователи распознают визуальные объекты по форме и стандартная квадратная форма чекбокса – это очень важно. Это связано с тем, что мы воспринимаем то, что ожидаем и ‘эта особенность описана у нас в Золотом правиле №4

Визуальная ясность. То есть пользователь должен легко распознавать элементы управления по их внешнему виду.

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

✓ Пример понятного чекбокса из интерфейса почты Яндекса

Для того, чтобы пользователю было понятно, какая опция сейчас включена или выбрана, отлично подойдет цветовая индикация. Поставленная галочка — это понятная метафора выбора. Рекомендуем использовать и цвет фона и галочку для отображения выбора.

2. Правильно располагайте списки чекбоксов

Правильно — это значит вертикально, чтобы каждый пункт был в отдельной строке.

Если вы больше любите горизонтальные списки, обратите внимание на расстояния между чекбоксами и их подписями: пользователь должен понимать, к какому чекбоксу какая подпись относится

3. Используйте в подписях чекбоксов понятные утвердительные формулировки

Подписи к чекбоксам должны быть утвердительными и отражать действия, чтобы было понятно, что произойдет при выборе каждой опции. Избегайте отрицательных формулировок, типа “Не присылать мне рассылку” —  в этом случае получается, что пользователь должен включить опцию, чтобы действие не происходило. Помните, что пользователи думают о своих целях, а не об инструментах для их исполнения.

✓ Удачный пример формулировки на сайте Ostrovok.ru

✘ Пример отрицательной формулировки в настройках Microsoft Word

4. Не делайте размер чекбокса слишком маленьким

Как известно, чем меньше элемент, тем сложнее пользователю с ним взаимодействовать. Эта проблема очень актуальна для чекбоксов. Как известно по закону Фиттса, в маленький квадрат неудобно ни целится, ни попадать. Есть несколько способов решить эту проблему. Так, можно превратить чекбокс в кнопку, метку или переключатель, сделав кликабельную область более крупной.

✓ Чекбокс маленького размера на сайте Ostrovok.ru, который превратили в кнопку

✓ Чекбокс удобного размера на сайте Аэрофлота

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

✓ Чекбокс небольшого размера на сайте Аэрофлота, который реагирует на нажатие подписи

6. Используйте опции «выбрать все» и «убрать все»

Чтобы облегчить работу пользователя с большим количеством чекбоксов (более 5), в интерфейсе должны быть предусмотрены опции «Выбрать все чекбоксы» и «Снять все чекбоксы». Представьте, что вам нужно выбрать, скажем, 14 пунктов из 20 в списке. Гораздо удобнее и быстрее будет сначала выбрать все, а потом снять ненужные галочки.

✓ Правильный пример использования опции “выбрать все” торрент-клиента μTorrent

7. Чекбокс не должен запускать действие мгновенно

Важно понимать, что, когда  пользователь взаимодействует с чекбоксами, он не ждет мгновенной обратной связи. Действие произойдет тогда, когда пользователь нажмет какую-то кнопку: “сохранить”, “отправить”, “подписаться”

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

✓ Удачный пример использования чекбокса на сайте Аэрофлота

Вариант №1 проверки чокнутого checkbox

Нам потребуется тег input с уникальным идентификатором(id) и еще кнопка по которой мы будем нажимать!

<input type=»checkbox» id=»rules»><i>Я согласен с <a href=»ссылка»>Условиями</a></i>
<button id=»submit»>Создать аккаунт</button>

Далее нам понадобится скрипт, который сможет определить, msk kb накат чекбокс или нет:

if (rules.checked) { alert(«Чекбокс нажат -вариант №1»); } else { alert(«Чекбокс не нажат-вариант №1»); }

Теперь нам понадобится onclick, для отслеживания нажатия на кнопку! И соберем весь код вместе:

<input type=»checkbox» id=»rules»><i>Я согласен с <a href=»https://dwweb.ru/page/more/rules.html» target=»_blank»>Условиями</a></i>

<button id=»submit»>Создать аккаунт</button>

<script>

submit.onclick = function(){

if (rules.checked) { alert(«Чекбокс нажат -вариант №1»); } else { alert(«Чекбокс не нажат-вариант №1»); }

}

</script>

Скрыть / показать элементы при установке флажка

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

<div>
<form action="">
   <input type="text"name="name"placeholder="name">
 
   <input type="email"name="email"placeholder="abcd@abcd.com">
 
<labelfor="more-info">show moreinfo</label>
<input id="more-info"name="more-info"type="checkbox">
<div id="conditional_part">
<textarea name="message"cols="30"rows="10"></textarea>
</div>
</form>
</div>

Внутри div располагается форма. В ее поля пользователь вводит имя и адрес электронной почты. В веб-форме также есть чекбокс и текстовая область (textarea).

Когда флажок чекбокса установлен, текстовая область отображается. Поэтому по умолчанию она должна быть скрыта. Для этого мы создаем скрытый контейнер div (с id conditional_part):

#conditional_part
{
  display:none;
}

Следующий шаг — создание JavaScript- кода, который будет отображать и скрывать эту текстовую область.

$('#more_info').change(function(){
    if(this.checked!=true){
          $("#conditional_part").hide();
     }
  else{
        $("#conditional_part").show();
  }
});

К checkbox с идентификатором more-info мы привязываем событие onchange, которое запускает анонимную функцию при возникновении события.

Внутри анонимной функции используется оператор if. Он проверяет, установлен ли флажок чекбокса или нет. Затем мы применяем jQuery- функции hide() и show(). Они изменяют значения свойства display блока div с идентификатором conditional_part.

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

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

<form action="checkbox-form.php" method="post">
    Do you need wheelchair access?
    <input type="checkbox" name="formWheelchair" value="Yes" />
    <input type="submit" name="formSubmit" value="Submit" />
</form>

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

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

<?php

if(isset($_POST) && 
   $_POST == 'Yes') 
{
    echo "Need wheelchair access.";
}
else
{
    echo "Do not Need wheelchair access.";
}

?>

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

<input type="checkbox" name="formWheelchair" value="Yes" />

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

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

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

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

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

Which buildings do you want access to?<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>

Обратите внимание, что input type checkbox имеют одно и то же имя (formDoor[]). И что каждое имя оканчивается на []

Используя одно имя, мы указываем на то, что чекбоксы связаны. С помощью [] мы указываем, что выбранные значения будут доступны для PHP скрипта в виде массива. То есть, $_POST возвращает не одну строку, как в приведенном выше примере; вместо этого возвращается массив, состоящий из всех значений чекбоксов, которые были выбраны.

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

<?php
  $aDoor = $_POST;
  if(empty($aDoor)) 
  {
    echo("Вы не выбрали ни одного здания.");
  } 
  else
  {
    $N = count($aDoor);

    echo("Вы выбрали $N здание(й): ");
    for($i=0; $i < $N; $i++)
    {
      echo($aDoor . " ");
    }
  }
?>

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

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

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

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

function IsChecked($chkname,$value)
    {
        if(!empty($_POST))
        {
            foreach($_POST as $chkval)
            {
                if($chkval == $value)
                {
                    return true;
                }
            }
        }
        return false;
    }

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

if(IsChecked('formDoor','A'))
{
//сделать что-то ...
}
//или использовать в расчете ...

$price += IsChecked('formDoor','A') ? 10 : 0;
$price += IsChecked('formDoor','B') ? 20 : 0;

Labels for checkboxes

If you tested the previous example, you will notice that we can put text next to a checkbox, but they are still two separate things — you can’t click the text to trigger the checkbox. This can be really annoying for the user, but fortunately for us, it’s easy to solve: Just use the label element! Here’s a basic example to show you the difference:

Two checkboxes — one without a label and one with. They might look almost identical, but the one with the label can be triggered by clicking both the actual checkbox and the attached label. This is nice if you’re sitting on a desktop PC with a mouse, but even better when you’re using a touch device like a smartphone, where small checkboxes can be hard to hit with your finger.

The label is very simple — it uses the for attribute to attach itself to a form element with a matching id attribute (notice how I have «dogs» in both places).

ПримечанияRemarks

С помощью флажка можно задать для пользователя выбор между двумя значениями, такими как «Да»/,» true/false» или » вкл/.».Use a CheckBox to give the user a choice between two values such as Yes/No, True/False, or On/Off.

Когда пользователь выбирает флажок, отображается особая метка (например, X), а ее текущий параметр — Да, _Истина_или включено; Если пользователь не выберет этот флажок, он будет пустым и его параметр имеет значение » нет», » ложь» или » отключено «.When the user selects a CheckBox, it displays a special mark (such as an X) and its current setting is Yes, True, or On; if the user does not select the CheckBox, it is empty and its setting is No, False, or Off. В зависимости от значения свойства TripleState , CheckBox также может иметь значение .Depending on the value of the TripleState property, a CheckBox can also have a value.

Если элемент CheckBox к , то при изменении настройки изменяется значение этого источника.If a CheckBox is to a , changing the setting changes the value of that source. Выключенный элемент CheckBox показывает текущее значение, но недоступен и не позволяет изменять значение из пользовательского интерфейса.A disabled CheckBox shows the current value, but is dimmed and does not allow changes to the value from the user interface.

Можно также использовать флажки внутри группы, чтобы выбрать один или несколько связанных элементов группы.You can also use check boxes inside a group box to select one or more of a group of related items. Например, можно создать форму заказа, содержащую список доступных товаров с элементом CheckBox, расположенным перед каждым товаром.For example, you can create an order form that contains a list of available items, with a CheckBox preceding each item. Пользователь может выбрать конкретный товар или товары, устанавливая соответствующие флажки CheckBox.The user can select a particular item or items by checking the corresponding CheckBox.

Свойством по умолчанию для элемента CheckBox является свойство Value.The default property of a CheckBox is the Value property. Событием по умолчанию для элемента CheckBox является событие Click.The default event of a CheckBox is the Click event.

Примечание

Кроме того, в ListBox можно установить флажок, выбрав пункт Параметры.The ListBox also lets you put a check mark by selected options. В зависимости от приложения можно использовать элемент ListBox вместо группы элементов управления CheckBox.Depending on your application, you can use the ListBox instead of using a group of CheckBox controls.

Оформление кнопок на чистом CSS

Чтобы оформить кнопки в соответствии с дизайном сайта, будем использовать только CSS. Спрячем оригинальный квадратик с помощью свойств z-index и opacity, в данном случае квадратики не сдвигаются с экрана, а просто становятся прозрачными (opacity:0).

CSS:

На том же самом месте отображаем кнопки с собственным дизайном.

Тег input может находится перед тегом label, тогда используем первый пример стилизации кнопок:

Если input — внутри тега label, тогда текст чекбокса помещаем в div с классом «text». Стили передаем с input:checked на div с классом «text» во втором примере:

HTML:

Таким образом, в зависимости от ситуации, всегда можно выбрать подходящий вариант расположения input и label. Если по какой-то причине не подходит вариант, когда input расположен перед label, можно расположить input внутрь тега label.

Стилизовать checkbox html можно также и с помощью скриптов (javascript, jQuery), современные браузеры прекрасно с ними справляются. Но если пользователь заходит на сайт со старого браузера, то предпочтение все же стоит отдать CSS.

Также нужно учесть, что на разных операционных системах стили «чекбоксов» будут смотреться по-разному. Если Google Chrome старается сглаживать эти различия, то на других браузерах дизайн кнопок может сильно отличаться.

Input Checkbox Object Properties

Checked or not checked?

Notice how all the checkboxes so far have not been checked from the beginning — the user would have to interact with the checkbox to change its state from unchecked to checked. This might be what you want, but sometimes, you want the checkbox to be checked by default, either to suggest a choice to the user or because you are showing a checkbox with a value that corresponds to an existing setting, e.g. from a database. Fortunately, this is very simple — just add the checked attribute to the checkbox:

In the old days of XHTML, where each attribute should always have a value, even the boolean attributes, it would look like this:

Either way should work in all modern browsers, but the first way is shorter and more «HTML5-like».

Получение ключей и значений формы с помощью jQuery

Чтобы получить значения из формы без перезагрузки страницы, следует использовать скрипты (javascript или jQuery):

Создадим массив:

Затем каждый (each) выбранный пункт («input:checked») с помощью функции push запишем в массив val():

Содержание массива val() будем отображать на странице, для чего добавим объект html

jQuery:

Узнать, если checkbox html был выбран, можно с помощью .is(«:checked») и .prop(«checked»).

Получим значения(val) каждого отмеченного флажка и выведем его через alert():

То же самое проделаем для получения идентификатора (id) с помощью .prop («checked»):

Вывод ключей и значений через alert() здесь только для примера, для работы формы они не нужны, поэтому их следует удалить из кода.

Сделаем кнопку отправки формы недоступной («disabled»), если ни один флажок не был установлен:

Обратите внимание на двоеточие: .is («:checked») работает корректно с двоеточием, а .prop(«checked») срабатывает без двоеточия!!!

Добавим возможность отмечать сразу все пункты.

Весь код.

HTML:

jQuery:

PHP:

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS ExponentiationJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements

Заключение

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

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

А у вас на сайте пользователям удобно взаимодействовать с чекбоксами? → Узнайте у наших экспертов прямо сейчас.

Список литературы

1. Закона Фиттса
2. Немов Р. С. Психология. – 4-е изд. – М.: ВЛАДОС, 2003. – Кн. 1. Общие основы психологии.