Хватит издеваться над чекбоксами

[baldr]

Заголовок немного не соответствует статье. Я ожидал, что будет что-то по поводу различных кастомизаций чекбокса стилями и жабьим скриптом, в результате чего он начинает выглядеть как кнопка, или как ещё какой-то необычный переключатель.

Однако, выходит, вы просто пожаловались на криворукость дизайнеров некоторых веб-сайтов.

Проблема с чекбоксами, как и с многими другими вещами в том, что очень часто от них пытаются получить функции, которые не были предусмотрены изначально. Уже на вашей второй картинке есть "чекбокс" "Мясо" в полунажатом состоянии. И это "виртуальный" чекбокс - в базу, скорее всего, будет сохранено одно из позиций под ним, а его значение - нет.

Также, внезапно, дуальность состояний оказывается довольно эфемерной. Ок, бизнес говорит - давайте добавим поле в профиль, о том, что юзер согласен получать рассылку. Вроде бы boolean (согласен-не согласен), однако, для уже существующих пользователей что мы поставим как значение в новом поле? Так, среди True/False появляется третье значение Null (ещё не выбрал). А дизайнер думает как это показать наглядно с помощью чекбокса.

[NightBlade74]

Стандартный чекбокс Windows и HTML формы поддерживает indeterminate state, тут ничего дизайнеру изобретать не надо. Вот здесь есть прям живой пример https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

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

[flancer]

Добавляем в профиль поле "получатьРассылку" и ставим true, если пользователь в явном виде дал согласие. По-умолчанию - false. Для всех существующих пользователей - false . Ну или true, если бизнес готов к этому. Всё. Дизайнер может думать о чём-то более полезном.

[Metotron0]

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

Я когда верстаю, для меня неуказанные случаи — это почти единственные причины вопросов: что, если строк будет не две, а пять? Может ли в будущем стать больше пунктов меню? Что, если блоков будет нечётное количество? Что, если пользователь зайдёт с планшета, а нарисовали только 768 и сразу 1920?

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

[nehrung]

Постановка галки в чекбокс - это всегда двоичный выбор, ставить или не ставить. Но на мой взгляд, тут есть нюанс: постановка галки интуитивно ассоциируется с ответом "да", в то время как непостановка - это ответ "нет".

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

[ivanuzzo]

не соглашусь, вариант справа работает в Таиланде. Можно отметить все варианты, или порознь, или ни одного - все равно будет ОСТРО !

[Kerman]

либо включен (отмечен галочкой), либо выключен (не отмечен)

Tri-state checkbox - это вполне разумный паттерн, когда нужно выбрать объекты в иерархии. Кстати, очень удобно: можно одним кликом выбрать всю ветку.

Пример

[Sazonov]

А вы в курсе что в винде ещё с доинтернетовских времён, обычная кнопка могла работать как чекбокс?(BuUTTON со стилем BS_CHECKBOX). И это вообще не квадратик с текстом.

[kunts2606]

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

[DarkTiger]

Кажется, что может быть проще — спроектировать галочка в квадратике.

Или написать первое предложение в статье без ошибок

[Roman_Pokora]

родные чекбоксары

[Grav]

Если оставить чекбокс «Мало соуса», будет не вполне ясно, что будет, если он выключен. Обычная порция соуса, много соуса, совсем без соуса? Лучше заменить на радиогруппу с конкретными вариантами добавления соуса