Чекбокс, это элемент интерфейса пользователя, позволяющий отмечать сразу несколько элементов из списка. В более широк смысле, чекбокс - это метод проверки списков, в котором вы можете ставить галочки, напротив нужных пунктов.
Чекбокс - это пустой квадратик, который может встретиться при заполнении различных анкет или бюллетеней. Этот квадратик подразумевает, что туда нужно поставить галочку или крестик в случае ответа да и оставить не заполненным в случае ответа нет.
Слово чекбокс пришло в русский язык из английского языка. На английском это будет так: checkbox, где check означает отметить, а box - коробка.
Чекбокс - это кнопка или специальный символ, который служит для заполнения специальных полей в анкетах, бюллетенях, опросах. Он может быть в электронном виде (электронная анкета, опрос) или в бумажном.
Переводится слово checkbox - флажок
Вот примеры чекбокса:
Чек - в переводе на русский это что-то вроде контроля. А чекбокс это по сути маленький квадратик, в который вы можете ставить галочки и точки. Приведу яркий пример из жизни практически каждого пользователя ПК: Вы устанавливаете игру или программу на ваш ПК, в один прекрасный момент вам дают почитать текст лицензионного соглашения, а в самом низу есть строка в которой написано Я принимаю... и слева от этих слов маленький белый квадратик, вот это и есть чекбокс, в нем вы обычно ставите галочку.
Чекбокс дословно с английского - это коробка (или бокс) для выбора (контроля). Чекбоксы используют в интерфейсе - это небольшой квадратик возле пунктов, который нужно отметить галочкой, чтобы выбрать.
Чекбокс - это ничто иное как графический элемент, используемый в различных компьютерных приложениях для обозначения таких параметров как да (включить), нет (выключить). обозначается чекбокс как пустой квадратик. а в нм подразумевается место для галочки в случае да.
Checkbox - (флаг) один из графических елементов, который используется в приложениях, и предназначен для множественного выбора
Может иметь три режима:
Выбранный, не выбранный, неопределенный
Чаще всего чекбокс мы можем встретить при заполнении каких-либо анкет.
Чекбокс - это изначально пустой квадратик внутри, которого мы можем поставить галочку, крестик, либо просто закрасить его, если согласны с утверждением, либо оставить пустым, если не согласны.
Поле в электронной форме или в реале (анкета, тест), где ставишь отметку у правильного ответа, где есть несколько ответов на вопрос. Чаще всего используется при проведении различных тестов, анкет.
Чекбокс - это инструмент интерфейса, который служит для обозначения какой-либо группы (например, для определения конкретных опций) и дальнейшей работы над ней, а также для обозначения состояния (вкл/выкл).
Внешность у этого флажка квадратная, но может быть, например, и круглой:
Для того, чтобы активировать чекбокс, его тело заполняется галочкой, крестиком, либо же квадратиком или иным графическим элементом. Рядом с чекбоксом отображается его значение, например:
Чекбокс можно немного оттюнинговать, и он превратится в еще более полезный инструмент (метка, кнопка и т.д.). Почитать об этом можно здесь.
Встречается чекбокс не только в электронном виде, но и на различных бумажных носителях (самый яркий пример - анкета).
Чекбокс или флаговая кнопка является элементом графического интерфейса, который позволяет пользователю выбирать необходимые параметры с двумя состояниями включено и выключено.
Наглядно выглядит так:
Checkbox это графический элемент, то есть один его из видов. Он предназначен для выбора. Встретить (использовать) этот элемент можно в различных анкетах, бюллетенях и так далее.
Слово Checkbox переводится на русский как Check - отметить (отметка) и box- коробка (квадратик).
Это скорее флажок, позволяющий управлять параметров включено и выключено
Как использовать чекбокс вам подскажет это видео
А в этой статье есть информация, которая дат более чткое представление об этом элементе и о его использовании.
Чебоксом называют специальны флажок, кружок, квадрат. В центре этих флажков при выборе чего-либо нужно поставить галочку. Чебокс часто можно встретить в различных программах, играх, опросах, анкетах и много где еще.
Иногда при работе с формой возникает ситуация, что для удобства пользователя надо одновременно выбрать все чекбоксы в форме. Для этого можно воспользоваться дополнительным чекбоксом (Отметить/Снять) и небольшим фрагментом javascript кода.
С помощью данного кода можно:
1. Отметить любое количество чекбоксов.
2. Отметить все чекбоксы щелкнув только по одному специальному чекбоксу.
3. Отметить и снять чекбоксы в один клик мыши.
Использование:Создать html код:
Добавить в форму чекбокс:
Прописать javascript-код перед закрывающимся тегом /head:
< aa.elements.length; i++){ aa.elements[i].checked = checked; } }
В итоге получится (демо с данным примером в начале статьи):
check/uncheck checbox
checked=false;
function checkedAll (frm1) {
var aa= document.getElementById("frm1");
if (checked == false){
checked = true
}
else{
checked = false
}
for (var i =0; i < aa.elements.length; i++) {
aa.elements[i].checked = checked;
}
}
Выбор/снятие всех чекбоксов
Чекбокс 1
Чекбокс 2
Нажмите для отмены/снятия чекбоксов
Чекбокс может иметь только два состояния: отмеченный и неотмеченный. Они могут иметь любое значение, но при отправке формы либо передавать его (отмеченное состояние) либо не передавать (неотмеченное состояние). По умолчанию состояние неотмеченное. В HTML можно управлять чекбоксом следующим образом:
Визуально чекбокс может быть в трех состояниях: отмеченный, неотмеченный и неопределённый. Они могут выглядеть следующим образом:
Несколько замечаний о чекбоксах:
Вы не можете сделать чекбокс неопределённым в HTML. Нет специального атрибута. Хотя есть свойство чекбокса, которое можно менять в JavaScript:
Var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;
или в jQuery:
$("#some-checkbox").prop("indeterminate", true); // prop введен в jQuery 1.6+
Неопределенное состояние является только визуальным эффектом. Чекбокс по-прежнему в отмеченном или неотмеченном состоянии. Значит, что визуальное неопределенное состояние маскирует реальное состояние чекбокса.
Как и сам чекбокс, его неопределенное состояние выглядит по-разному в разных браузерах. Вот пример в Opera 11.50 на Mac:
И зачем это нужно?При разработке проектов часто возникает необходимость в структуре чекбоксов. Каждый чекбокс может иметь наследников чекбоксов. Если все наследники чекбоксы отмечены, то и родительский чекбокс может быть отмеченным. Если ни один наследник не отмечен - то и родитель не отмечен. Но если хотя бы один наследник отмечен, то родительский чекбокс находится в неопределённом состоянии (что может означать - "частично отмечен").
Пример кода не является идеалом - проверяется только один уровень для введения неопределенного состояния.
Можно также организовать переключение между состояниями при нажатии кнопки мыши на чекбоксе:
Var $check = $("input"), el; $check .data("checked",0) .click(function(e) { el = $(this); switch(el.data("checked")) { // Неотмеченное состояние, переходим в неопределённое case 0: el.data("checked",1); el.prop("indeterminate",true); break; // Неопределённое состояние, переходим в отмеченное case 1: el.data("checked",2); el.prop("indeterminate",false); el.prop("checked",true); break; // Отмеченное состояние, переходим в неопределенное default: el.data("checked",0); el.prop("indeterminate",false); el.prop("checked",false); } });
Как отметить все чекбоксы? Воспользуемся jquery. Сразу предупреждаю, что в этом нет ничего сложного, не пугайтесь обилия кода в уроке. В основном это один и тот же код, повторённый несколько раз с небольшими изменениями.
Как отметить все чекбоксы с помощью ссылокЧтобы отметить все чекбоксы, сделаем к ним 2 ссылки «отметить все» и «сбросить все»
У ссылок есть атрибут rel=»form». Он определяет, для каких чекбоксов работает скрипт. В данном случае, для любого объекта с id=»example_group1″ Теперь напишем код, который будет отмечать все чекбоксы:
// Активируем все чекбоксы
//При клике на ссылку "Отметить все чекбоксы", активируем checkbox
$("a").click(function() {
$("#" + $(this).attr(‘rel’) + " input:checkbox:enabled").attr(‘checked’, true);
//Если вам нужно отмечать и неактивные чекбоксы (disabled), то предыдущая строчка должна выглядеть так:
return false;
});
// Снимаем все отметки
$("a").click(function() {
//Если должны обрабатываться неактивные чекбоксы, опять исключаем параметр:enabled
//$("#" + $(this).attr(‘rel’) + " input:checkbox").attr(‘checked’, true);
return false;
});
});
$(document).ready(function() { // Выбор всех //При клике по кнопке "отметить все" активируем чекбоксы $("#example_all").click(function() { $("#" + $(this).attr(‘rel’) + " input:checkbox:enabled").attr(‘checked’, true); return false; }); // При клике по кнопке "сбросить все" убираем отметки $("#example_noone").click(function() { $("#" + $(this).attr(‘rel’) + " input:checkbox:enabled").attr(‘checked’, false); return false; }); });
Как видите, всё почти так же, как и в способе с ссылками. Разница только в том, что ссылки мы различаем по параметру href, а кнопки по id
Как отметить все чекбоксы с одного главного чекбоксаТак же можно повесить отметку всех чекбоксов на один чекбокс:
$(document).ready(function() {
// Выбор всех
//При клике по кнопке "отметить все" активируем чекбоксы
$("#example_all").click(function() {
$("#" + $(this).attr(‘rel’) + " input:checkbox:enabled").attr(‘checked’, true);
return false;
});
// При клике по кнопке "сбросить все" убираем отметки
$("#example_noone").click(function() {
$("#" + $(this).attr(‘rel’) + " input:checkbox:enabled").attr(‘checked’, false);
return false;
});
});
Учтите, что, ради избегания рекурсии, нужно ключевой чекбокс сделать не таким как все. Это можно реализовать с помощью присвоения класса для всех чекбоксов, кроме ключевого. В примере таким классом является.example_check.
Продолжаю серию статей по улучшению интерфейсных элементов. В этом раз пришла очередь поговорить о чекбоксах. Теперь можно получать .
ЧекбоксыЧекбоксы (checkboxes) - изначально создавались как элементы группового выбора. Т.е. предназначались для обозначения какой-то группы из элементов для последующих групповых действий с ними.
Хорошие и настоящие чекбоксы есть в Gmail
Примером использования чекбоксов может служить любой современный интерфейс почты. Отметив несколько писем их можно, например, все удалить.
Проблемы и решения при использовании чекбоксовПосмотрим на основные проблемы, которые я наблюдаю при использовании чекбоксов и что с этими проблемами можно сделать.
Использование чекбоксов для бинарных состоянийЧасто чекбокс используют для выбора между двумя разными опциями. Например, такой чекбокс я видел в одном интернет-магазине.
Такой чекбокс ничего не объясняет. Тут не понятно будет ли доставка почтой или мне придется ехать за своей покупкой. Гораздо логичней в этом случае будет использовать радиобаттон для выбора нужной опции. Переделываем.
Теперь стало все стало гораздо понятней
Использование чекбоксов для включения опцийДовольно часто чекбоксы использую для показа включения и выключения опции. Что я считаю не очень правильным.
Чекбоксы - это не кнопки. Это элементы предназначенные для групповых операций. Нажатие на чекбокс не должно приводить к какому либо действию. Для визуального определения включенных и невключенных опций из списка прекрасно подойдет цветовая индикация.
В приведенном выше примере следовало бы выбрать несколько опций и нажать кнопку «Применить». Такой вариант жизнеспособен, но не очень удобен. Что же делать? Я предлагаю такое решение:
Включение опции в одном из клиентских проектов
Здесь прекрасно видно состояние опции (включена или нет). Сразу видно переключение и решена еще одна проблема о которой мы поговорим дальше. Подобный переключатель пришел из интерфейса Айфона и является достойным аналогом простого чекбокса.
Малый размер кликабельной областиСогласно закону Фиттса, чем меньше элемент, тем труднее его использовать. Эту проблему можно наблюдать не только в чекбоксах. Это одна из главных проблем многих контролов.
В маленькую галочку не удобно целится и попадать. Даже если сделать всю область вместе с текстом кликабельной, то пользователи буду продолжать целиться именно в галочку.
Какие есть выходы и приемы?Тем самым показав кликабельную область.
Чекбокс-кнопка на сайте Ostrovok.ru
Увеличив этим область клика.
Чекбокс-метка на одном из клиентских проектов
3. Превратить чекбокс в переключатель. Об этом я писал выше.
«Выбрать все» и «убрать все»Для удобства работы с большим количеством чекбоксов в интерфейсе должны присутствовать опции «Выбрать все чекбоксы» и «Снять все чекбоксы». В противном случае работа с таким интерфейсом стает очень нудной и долгой. Представьте, что вам нужно выбрать хотя бы 10 пунктов из 12 имеющихся в списке. Это гораздо проще сделать выбрав все и сняв ненужные опции.
ВыводыЧекбоксы изначально создавались как инструменты группового выбора. И использовать их для чего-то еще в изначальном виде не стоит. Однако после некоторого тюнинга и соблюдения простых рекомендаций их можно превратить в удобный инструмент для вашего пользователя.
В предыдущих и следующих сериях- . Почему их не стоит использовать. А если использовать, то как?
- . Простой выбор без выбора.
- . Как должны работать поля ввода с разными типами данных.