Html dom input checkbox object
Содержание:
- Используйте чекбоксы для изменения настроек; не используйте для обозначения действия
- Чекаем checkbox по нажатию на строку.
- Чекбоксы HTML.
- Советы, как правильно использовать чекбокс
- 1. Не перемудрите и используйте стандартный вид чекбокса
- 2. Правильно располагайте списки чекбоксов
- 3. Используйте в подписях чекбоксов понятные утвердительные формулировки
- 4. Не делайте размер чекбокса слишком маленьким
- 6. Используйте опции «выбрать все» и «убрать все»
- 7. Чекбокс не должен запускать действие мгновенно
- Customised HTML5 messages
- Вариант №1 проверки чокнутого checkbox
- Multiple choices
- 1. Prerequisites & Basic Setup
- How To Create a Custom Radio Button
- Текущее состояние переключателя нужно указывать не на нем, а за его пределами
- Labels for checkboxes
- Separating form from function
- Сообщение системы комментирования :
- Примеры использования CheckBox
- Подход
- All attributes of input
- Input Checkbox Object Properties
- Флажки (Checkbox)
- Images
Используйте чекбоксы для изменения настроек; не используйте для обозначения действия
Представим себе опцию, которая подразумевает только два возможных варианта. Что использовать в этом случае: переключатель или чекбокс? Основное отличие в том, что чекбокс означает статус, а переключатель — действие. Можете представить себе реальный выключатель — какое действие он выполняет в вашей ситуации? Если картинка сложилась, можете смело использовать для этой опции переключатель.
Посмотрите на пример ниже. Понятно, что переключатель сети Wi-Fi находится в положении “on”. А вот чекбокс немного смущает. Пользователю приходится думать, включен ли Wi-Fi или поставить галочку, чтобы включить его.
Для управления сервисами и системными компонентами (такими как Wi-Fi) используйте переключатели.
Чекаем checkbox по нажатию на строку.
Спасибо за тему одному из пользователей подписавшимся «Прохожий». Уж больно мудреный код, как мне кажется вы предложили!
Здесь есть некое противоречие!
Давайте попробуем разобраться, почему работает не так, как хочется!
Вы можете протестировать уже готовый скрипт ниже:
нажми меня
Не нажат
Дело в том, что алгоритмы нажатия на «checkbox» и «строку» отличается!
Вот привожу пример:
Нажатие по checkboxуНажатие по строке:
Надеюсь вы уловили разницу…
Если это чекбокс, то действие прямое. При нажатии на чекбокс, проверяем чекнут ли чекбокс и выводим, что «чекнут»
Если же это строка, когда чекбокс чекнут, отключаем чекбокс и выводим, что чекбокс не нажат.
А сделаете иначе — просто ничего не будет работать…
Чекбоксы HTML.
Мы продолжаем рассматривать элементы формы и сегодня мы рассмотрим еще один вид переключателей в HTML это чекбоксы. Чекбоксы это альтернатива радиокнопкам только чекбоксы позволяют выделить одновременно несколько элементов в противоположность радиокнопкам, где можно выбрать только один элемент.
Чекбоксы создаются очень просто с помощью все того же тега <input> только атрибут type=»» будет содержать значение checkbox.
И так, создадим пару таких чекбоксов, позволяющих пользователю сделать выбор из предложенных вариантов. Для этого создаем отдельный абзац, в котором создадим сами чекбоксы, где и предложим варианты выбора.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
Какие Вы фрукты любите больше всего?
Какие Вы фрукты любите больше всего?
Аппельсины
Бананы
Яблоки
Груши
Перец
</body>
</html>
Как мы видим, каждый чекбокс мы заключили в тег <label> </label>, чтобы при нажатии на название фрукта чекбокс выделялся автоматически. Как уже заметили у каждого чекбокса свое имя, т.е. у атрибута name свое индивидуальное значение.
Если вы уже сохранили у себя в редакторе код выше и обновили браузер то у Вас должны были появится четыре чекбокса, которые можно выбрать хоть один, хоть все сразу. В данном варианте при загрузке страницы все чекбоксы пустые, однако бывают ситуации, когда нужно по умолчанию выделить один из них.
Для этого используется все тот же атрибут checked, который изначально отмечает выбранный чекбокс.
HTML
Апельсины
Теперь, если посмотрите, то чекбокс с именем «Апельсины» автоматически становится активным. И рассмотрим еще один атрибут для чекбоксов, который позволяет сделать не активный чекбокс. Этот атрибут именуется disabled, что в переводе с английского означает «отключен». С помощью этого атрибута чекбокс делается не активным и не реагирует на действия пользователя.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
Какие Вы фрукты любите больще всего?
Аппельсины
Бананы
Яблоки
Груши
Перец
</body>
</html>
В примере выше, как видно первый элемент по умолчанию становится активным, так как присутствует атрибут checked, а последний чекбокс на против не активен так как «Перец» не является фруктом и нечего его выбирать. Для деактивации этого чекбокса использован атрибут
disabled, что и сделало область не активной.
Вот и все с чекбоксами. Результат смотрите Демо-версии, а мы переходим к следующему элементу формы select.
Советы, как правильно использовать чекбокс
1. Не перемудрите и используйте стандартный вид чекбокса
Традиционно чекбоксы имеют квадратную форму
Пользователи распознают визуальные объекты по форме и стандартная квадратная форма чекбокса – это очень важно. Это связано с тем, что мы воспринимаем то, что ожидаем и ‘эта особенность описана у нас в Золотом правиле №4
Визуальная ясность. То есть пользователь должен легко распознавать элементы управления по их внешнему виду.
Чекбокс должен выглядеть как небольшой квадратик, в котором в случае выбора появляется небольшая галочка. Не стоит делать чекбоксы ромбовидными или круглыми, независимо от того, что скажут вам специалисты по маркетингу или дизайнеры.
✓ Пример понятного чекбокса из интерфейса почты Яндекса
Для того, чтобы пользователю было понятно, какая опция сейчас включена или выбрана, отлично подойдет цветовая индикация. Поставленная галочка — это понятная метафора выбора. Рекомендуем использовать и цвет фона и галочку для отображения выбора.
2. Правильно располагайте списки чекбоксов
Правильно — это значит вертикально, чтобы каждый пункт был в отдельной строке.
Если вы больше любите горизонтальные списки, обратите внимание на расстояния между чекбоксами и их подписями: пользователь должен понимать, к какому чекбоксу какая подпись относится
3. Используйте в подписях чекбоксов понятные утвердительные формулировки
Подписи к чекбоксам должны быть утвердительными и отражать действия, чтобы было понятно, что произойдет при выборе каждой опции. Избегайте отрицательных формулировок, типа “Не присылать мне рассылку” — в этом случае получается, что пользователь должен включить опцию, чтобы действие не происходило. Помните, что пользователи думают о своих целях, а не об инструментах для их исполнения.
✓ Удачный пример формулировки на сайте Ostrovok.ru
✘ Пример отрицательной формулировки в настройках Microsoft Word
4. Не делайте размер чекбокса слишком маленьким
Как известно, чем меньше элемент, тем сложнее пользователю с ним взаимодействовать. Эта проблема очень актуальна для чекбоксов. Как известно по закону Фиттса, в маленький квадрат неудобно ни целится, ни попадать. Есть несколько способов решить эту проблему. Так, можно превратить чекбокс в кнопку, метку или переключатель, сделав кликабельную область более крупной.
✓ Чекбокс маленького размера на сайте Ostrovok.ru, который превратили в кнопку
✓ Чекбокс удобного размера на сайте Аэрофлота
Таким образом пользователю будет легче работать с большей площадью. Кроме того, это более удобно для пользователя, поскольку он привык, что можно нажать на любую часть элемента.
✓ Чекбокс небольшого размера на сайте Аэрофлота, который реагирует на нажатие подписи
6. Используйте опции «выбрать все» и «убрать все»
Чтобы облегчить работу пользователя с большим количеством чекбоксов (более 5), в интерфейсе должны быть предусмотрены опции «Выбрать все чекбоксы» и «Снять все чекбоксы». Представьте, что вам нужно выбрать, скажем, 14 пунктов из 20 в списке. Гораздо удобнее и быстрее будет сначала выбрать все, а потом снять ненужные галочки.
✓ Правильный пример использования опции “выбрать все” торрент-клиента μTorrent
7. Чекбокс не должен запускать действие мгновенно
Важно понимать, что, когда пользователь взаимодействует с чекбоксами, он не ждет мгновенной обратной связи. Действие произойдет тогда, когда пользователь нажмет какую-то кнопку: “сохранить”, “отправить”, “подписаться”
То есть чекбоксы хорошо работают в ситуациях, когда нужно сделать несколько промежуточных шагов, чтобы изменения вступили в силу.
✓ Удачный пример использования чекбокса на сайте Аэрофлота
Customised HTML5 messages
As you would hope it is possible to customise the messages that are
displayed by the browser with your own text, but this can only be done
via JavaScript. You need to check the validity state of the
element yourself and set (and clear) the message explicitly:
The block of JavaScript below the form is assigning our custom error
message to the checkbox when the page loads. We know that the checkbox
is unchecked by default so we need to tell the browser what message to
display.
The onchange event handler on the checkbox then toggles the error message. When the checkbox is valid (checked) the message is set to blank which tells the browser that it’s ok for the form to be submitted.
When the checkbox is not checked and the Submit button is clicked an
alert is displayed similar to the examples above, but using our text
instead of the default.
Here you can see the custom message being displayed in Firefox:
Custom messages can be set in a similar manner for text and
other elements, but you will need to check the validity object
states (validity.valueMissing, validity.patternMismatch, …) to
determing the right message. See the link under References for
details.
Вариант №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>
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.
1. Prerequisites & Basic Setup
First, go on and create a html file with its basic syntax inside:
<!DOCTYPE html> <html> <head> <title>Checkbox Example</title> </head> <body> <!-- STYLE SECTION --> <style type="text/css"> </style> <!-- HTML SECTION --> </body> </html>
Now HTML5 has a way of creating a default checkbox. The code below would create a slightly basic checkbox:
<!-- HTML SECTION --> <input type="checkbox" name="fruit" value="apple" />Red Apple
where the checkbox is explicitly defined by the . That would look like this:
Basic Checkbox of HTML
If you want to have several items, you are recommended to create them under a under a .
That is because you might probably want to make that functional and submit the data somewhere. Look at the code below:
<!-- HTML SECTION -->
<form method="post"> <!-- wrapping these under a form for later submission -->
<fieldset> <!-- gives your question (including answers) a nice border -->
<legend>What is Your Favorite Pet?</legend> <!-- Your question goes here -->
<input type="checkbox" name="fruit" value="apple" />Red Apple <br />
<input type="checkbox" name="fruit" value="banana" />Ecuador Banana<br />
<input type="checkbox" name="fruit" value="strawberry" />Strawberry<br />
<input type="submit" value="Submit now" />
<!-- submit input type, has the view of a button -->
</fieldset>
</form>
This more complete case would look like this:
A Question with Checkbox Answers
How To Create a Custom Radio Button
Example
/* 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 radio button */.container input { position: absolute;
opacity: 0; cursor: pointer; height: 0; width:
0;
}/* Create a custom radio button */.checkmark { position:
absolute; top: 0; left: 0; height: 25px;
width: 25px; background-color: #eee; border-radius: 50%;
}/* On mouse-over, add a grey background color
*/.container:hover input ~ .checkmark { background-color: #ccc;
}/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark { background-color: #2196F3;
}/* Create the indicator (the dot/circle — hidden when not checked) */.checkmark:after
{ content: «»; position: absolute; display:
none;}/* Show
the indicator (dot/circle) when checked */.container input:checked ~ .checkmark:after
{ display: block;}/* Style the indicator (dot/circle) */
.container .checkmark:after { top: 9px; left: 9px;
width: 8px; height: 8px; border-radius: 50%;
background: white;}
❮ Previous
Next ❯
Текущее состояние переключателя нужно указывать не на нем, а за его пределами
При проектировании переключателей постарайтесь избежать путаницы с текущим состоянием. Для примера возьмем переключатель из iOS 6 и рассмотрим состояние ON с голубой заливкой.
Не сразу понятно: надпись ON — это текущее состояние или действие?
Как понять, переключатель сейчас в состоянии ON или его нужно передвинуть, чтобы перевести на ON? “ON” — это состояние (прилагательное) или действие (глагол)? Не ясно.
Не нужно путать пользователей: очень важно разграничить действие и состояние. А за счет подсветки текущего состояния дизайн можно сделать еще удобнее:. Цвет текста показывает текущее состояние (подсвечивается — значит включено)
Цвет текста показывает текущее состояние (подсвечивается — значит включено)
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).
Separating form from function
The previous example was starting to become a bit cluttered with two
JavaScript script blocks as well as the onsubmit and
onchange event handlers inlined in the HTML.
We can separate the JavaScript code from the HTML and have the
required event handlers assigned after the page has loaded
using an onload event listener.
Here first is the HTML with all JavaScript removed:
And the JavaScript to reinstate the event handlers:
The forms behaviour should be unchanged:
While it looks much more complicated, this is a better solution
because it allows for the HTML and JavaScript to be maintained
separately. The only hooks between them are the id values for
the form itself and the checkbox input element. Also gone are any
globally defined functions or variables.
The JavaScript can now be moved to a separate file, or converted to
a code library allowing for it to be reused with other forms.
The required attribute on checkboxes is supported in
Internet Explorer 10 and most/all other browsers except for.
Safari which ignores the requirement
Сообщение системы комментирования :
01.09.2021
Форма пока доступна только админу… скоро все заработает…надеюсь…
…
пожаловаться
31/12/2020 03:58 ПрохожийА как проверить, чекнут ли чекбокс программно, то есть — другим скриптом, а не мышкой?Вот тут пример:https://yadi.sk/d/VbCxOEoejW8S1gСпасибо за статью. С наступающим Новым Годом! 🙂
ответить
…
пожаловаться
01/01/2021 03:30 МаратИ вас с Новым годом!Посмотрите .
ответить
…
пожаловаться
02/01/2021 10:44 ПрохожийЗдравствуйте Марат!Спасибо Вам, за оперативность и развернутый ответ с примерами. И ОГРОМНОЕ спасибо, что вообще нашли время и силы помогать людям в первый день Нового Года(!). Это самоотверженность, и на это не каждый способен.Спасибо за помощь! Удачи Вам в Новом Году!)
ответить
Примеры использования CheckBox
Пример 1
Отображение элемента управления CheckBox на пользовательской форме с параметрами, заданными в коде VBA Excel:
|
1 |
PrivateSubUserForm_Initialize() WithCheckBox1 .Caption=»Нажмите на меня» .ControlSource=»A1″ .Value=False .Left=12 .Top=12 EndWith EndSub |
Размещается данная процедура в модуле пользовательской формы.
Если несколько элементов управления CheckBox привязать к одной ячейке, то при клике на одном из них, менять свое состояние будут и все остальные.
Пример 2
Смена надписи «Флажка» в зависимости от его состояния:
|
1 |
‘Устанавливаем первоначальные PrivateSubUserForm_Initialize() WithCheckBox1 .Caption=»Поставьте галочку» .Value=False .TripleState=False EndWith EndSub ‘Меняем надпись «Флажка» при PrivateSubCheckBox1_Change() IfCheckBox1.Value Then CheckBox1.Caption=»Снимите галочку» Else CheckBox1.Caption=»Поставьте галочку» EndIf EndSub |
Пример 3
Скрытие и отображение, изменение доступности других элементов управления с помощью «Флажка».
Для реализации этого примера необходимо создать пользовательскую форму с четырьмя элементами управления: CheckBox1, TextBox1, TextBox2 и CommandButton1. А в модуле формы разместить следующий код:
|
1 |
‘Устанавливаем первоначальные PrivateSubUserForm_Initialize() WithCheckBox1 .Caption=»Хочу сложить два числа» .Value=False .TripleState=False EndWith WithTextBox1 .Enabled=False .Text=»Слагаемое 1″ EndWith WithTextBox2 .Enabled=False .Text=»Слагаемое 2″ EndWith WithCommandButton1 .Caption=»Сложить» .Visible=False EndWith EndSub ‘Меняем свойства других элементов PrivateSubCheckBox1_Change() IfCheckBox1.Value Then TextBox1.Enabled=True TextBox2.Enabled=True CommandButton1.Visible=True Else TextBox1.Enabled=False TextBox2.Enabled=False CommandButton1.Visible=False EndIf EndSub ‘Складываем два числа PrivateSubCommandButton1_Click() IfIsNumeric(TextBox1)AndIsNumeric(TextBox2)Then MsgBox TextBox1&» + «&TextBox2&» = «_ &CDbl(TextBox1)+CDbl(TextBox2) EndIf EndSub |
Форма открывается с недоступными для пользователя текстовыми полями и скрытой кнопкой «Сложить»:
После установки галочки на флажке текстовые поля становятся доступными для редактирования, и отображается кнопка «Сложить»:
Подход
Чекбоксы и радиокнопки в браузере по умолчанию теперь заменяются с помощью , цель которого – в улучшении их расположения и «поведения» их элементов HTML. Чекбоксы существуют для выбора одного или нескольких параметров из списка, а радиокнопки — одного.
Структурно наши и являются одноуровневыми элементами, в отличие от внутри . Это немного более сложно, так как вы должны указать и , чтобы связать и . Мы используем родственный селектор () для всех наших состояний , например: или . В сочетании с классом мы можем легко стилизовать текст для каждого элемента на основе состояния .
В наших проверках используются пользовательские значки Bootstrap для обозначения отмеченных или неопределенных состояний.
All attributes of input
| Attribute name | Values | Notes |
|---|---|---|
| step | Specifies the interval between valid values in a number-based input. | |
| required | Specifies that the input field is required; disallows form submission and alerts the user if the required field is empty. | |
| readonly | Disallows the user from editing the value of the input. | |
| placeholder | Specifies placeholder text in a text-based input. | |
| pattern | Specifies a regular expression against which to validate the value of the input. | |
| multiple | Allows the user to enter multiple values into a file upload or email input. | |
| min | Specifies a minimum value for number and date input fields. | |
| max | Specifies a maximum value for number and date input fields. | |
| list | Specifies the id of a <datalist> element which provides a list of autocomplete suggestions for the input field. | |
| height | Specifies the height of an image input. | |
| formtarget | Specifies the browsing context in which to open the response from the server after form submission. For use only on input types of «submit» or «image». | |
| formmethod | Specifies the HTTP method (GET or POST) to be used when the form data is submitted to the server. Only for use on input types of «submit» or «image». | |
| formenctype | Specifies how form data should be submitted to the server. Only for use on input types «submit» and «image». | |
| formaction | Specifies the URL for form submission. Can only be used for type=»submit» and type=»image». | |
| form | Specifies a form to which the input field belongs. | |
| autofocus | Specifies that the input field should be in focus immediately upon page load. | |
| accesskey | Defines a keyboard shortcut for the element. | |
| autocomplete | Specifies whether the browser should attempt to automatically complete the input based on user inputs to similar fields. | |
| border | Was used to specify a border on an input. Deprecated. Use CSS instead. | |
| checked | Specifies whether a checkbox or radio button form input should be checked by default. | |
| disabled | Disables the input field. | |
| maxlength | Specifies the maximum number of characters that can be entered in a text-type input. | |
| language | Was used to indicate the scripting language used for events triggered by the input. | |
| name | Specifies the name of an input element. The name and value of each input element are included in the HTTP request when the form is submitted. | |
| size | Specifies the width of the input in characters. | |
| src | Defines the source URL for an image input. | |
| type | buttoncheckboxfilehiddenimagepasswordradioresetsubmittext | Defines the input type. |
| value | Defines an initial value or default selection for an input field. |
Input Checkbox Object Properties
| Property | Description |
|---|---|
| autofocus | Sets or returns whether a checkbox should automatically get focus when the page loads |
| checked | Sets or returns the checked state of a checkbox |
| defaultChecked | Returns the default value of the checked attribute |
| defaultValue | Sets or returns the default value of a checkbox |
| disabled | Sets or returns whether a checkbox is disabled, or not |
| form | Returns a reference to the form that contains the checkbox |
| indeterminate | Sets or returns the indeterminate state of the checkbox |
| name | Sets or returns the value of the name attribute of a checkbox |
| required | Sets or returns whether the checkbox must be checked before submitting a form |
| type | Returns which type of form element the checkbox is |
| value | Sets or returns the value of the value attribute of a checkbox |
Флажки (Checkbox)
Последнее обновление: 31.08.2017
Флажки представляют элементы управления, которые могут находиться в двух состояниях: отмеченном и неотмеченном.
Одиночный флажок может быть привязан к логическому значению true или false:
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">` checked `</label>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
checked: true
}
});
</script>
По умолчанию для отмеченного состояния используется значение true, а для неотмеченного — false. Но вместо них можно
определить свои собственные значения для обоих состояний и между этими значениями переключаться:
<div id="app">
<input type="checkbox" v-model="light" v-bind:true-value="on" v-bind:false-value="off" />
<span v-if="light===on">Выключить</span>
<span v-else>Включить</span>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
on: true,
off:false,
light: true
}
});
</script>
Вместо значений true и false флажок привязывается к одному из свойств on или off. С помощью атрибута
отмеченное состояние будет сопоставляться со свойством on. Соответственно в неотмеченном состоянии флажок приобретает значение off. А само выбранное значение
попадает в свойство light.
Привязка к массиву
Также группа флажков может быть привязана к одному массиву. В этом случае при отметке флажка его значение попадает в массив:
<div id="app">
<input type="checkbox" value="Tom" v-model="selectedUsers">
<label>C#</label><br>
<input type="checkbox" value="Bob" v-model="selectedUsers">
<label>Bob</label><br>
<input type="checkbox" value="Sam" v-model="selectedUsers">
<label>Sam</label><br>
<input type="checkbox" value="Alice" v-model="selectedUsers">
<label>Alice</label><br>
<span>Выбрано: `selectedUsers`</span>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
selectedUsers:[]
}
});
</script>
В данном случае 4 флажка привязаны к массиву selectedUsers. Отметив определенный флажок, мы добавим его значение в массив.
Привязка к объекту
В примере выше значение каждого флажка представляло некоторую строку. Но также флажок может быть привязан к целому объекту. Для динамической привязки у
элемента html применяется атрибут v-bind:value:
<div id="app" class="col-md-4"> <template v-for="user in users"> <input type="checkbox" v-bind:value="user" v-model="selectedUsers"> <label>`user`.`name`</label><br> </template> <ul> <li v-for="user in selectedUsers">`user`.`name` - `user`.`age`</li> </ul> </div> <script src="https://unpkg.com/vue"></script> <script> var app = new Vue({ el: '#app', data: { users:, selectedUsers:[] } }); </script>
Здесь динамически для каждого объекта в массиве формируется флажок, а при выборе флажка объект попадет в массив selectedUsers.
НазадВперед
Images
SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison SliderFavicon
