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

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

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

Навигация по статье

Разметка чекбокса

Комментарии даны в коде:

<div class="option">
  <!-- Браузерный чекбокс -->
  <input type="checkbox" name="option1" id="option1" class="default-checkbox" />
  <!-- Кастомный чекбокс -->
  <label for="option1" class="custom-checkbox"></label>
  <!-- Текст чекбокса -->
  <label for="option1" class="title">Option 1</label>
</div>

Стилизация чекбокса

Комментарии даны в коде:

.option {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  user-select: none; /* Запрещаем выделение при нажатии */
}

.option .default-checkbox {
  display: none; /* Скрываем браузерный чекбокс */
}

/* Стили для поля кастомного чекбокса */
.option .custom-checkbox {
  display: block;
  width: 30px;
  height: 30px;
  background-color: #eee;
  margin-right: 10px;
  cursor: pointer;
  position: relative;
}

/* Стили для синего квадрата внутри чекбокса */
.option .custom-checkbox::before {
  display: none; /* По дефолту скрыаем его */
  position: absolute;
  content: "";
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Размещаем по центру */
  background-color: #0081f1;
}

/* При состоянии checked - показываем синий квадрат */
.option .default-checkbox:checked + .custom-checkbox::before {
  display: block;
}

Получаем состояние чекбокса

Функция getOptionValue позволяет вернуть состояние чекбокса (true или false).

const option1 = document.querySelector("#option1");

option1.addEventListener("change", getOptionValue);

function getOptionValue(e) {
  console.log(e.target.checked);
}