Sdscompany.ru

Компьютерный журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Html checkbox mvc

Создание HTML-элементов

Итак, в предыдущей статье мы рассмотрели создание и настройку HTML-дескрипторов веб-форм. HTML-форма не имеет особого смысла до тех пор, пока не будут созданы некоторые элементы управления вводом (например, ). В таблице ниже описаны базовые вспомогательные методы, которые доступны для создания элементов , и приведены примеры генерируемой ими HTML-разметки. Во всех этих вспомогательных методах первый аргумент используется для установки значений атрибутов id и name элемента , а второй аргумент служит для установки значения атрибута value.

Каждый из перечисленных вспомогательных методов имеет перегруженную версию. В этой таблице показаны простейшие версии, но можно также предоставить дополнительный аргумент object для указания HTML-атрибутов, как это делалось с элементом .

Генерация элемента управления вводом из свойства модели

Вспомогательные методы, используемые в предыдущем разделе, работают хорошо, но нам по-прежнему необходимо гарантировать, что значение, передаваемое в первом аргументе, соответствует значению модели, которое передается во втором аргументе. Если эти значения не согласованы, инфраструктура ASP.NET MVC Framework не сможет воссоздать объект модели из данных формы, поскольку атрибуты name и значения элементов формы не соответствуют друг другу.

Для каждого метода, перечисленного в таблице выше, доступна перегруженная версия, которая принимает единственный аргумент типа string:

Аргумент string применяется для поиска в данных представления, в объекте ViewBag и в модели представления соответствующего элемента данных, который может использоваться в качестве основы для элемента input. Таким образом, например, если вызвать @Html.TextBox(«DataValue»), то инфраструктура ASP.NET MVC Framework попытается найти элемент данных, который соответствует ключу DataValue. Будут проверяться следующие местоположения:

Первое найденное значение используется для установки атрибута value генерируемой HTML-разметки. (Последняя проверка, в @Model.DataValue, предпринимается, только если модель представления содержит свойство или поле по имени DataValue.)

Если указать строку вроде DataValue.First.Name, поиск становится более сложным. Инфраструктура ASP.NET MVC Framework опробует различные комбинации элементов, разделяемых точками, такие как перечисленные ниже:

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

Использование строго типизированных вспомогательных методов для создания элементов управления вводом

Каждому базовому вспомогательному методу для создания элементов управления вводом, описанному в таблице выше, соответствует строго типизированный вспомогательный метод. Эти вспомогательные методы перечислены в таблице ниже вместе с примерами HTML-разметки, которую они генерируют. Такие вспомогательные методы могут применяться только со строго типизированными представлениями. (Часть вспомогательных методов генерируют атрибуты, которые помогают обеспечивать проверку достоверности данных форм на стороне клиента, но для краткости в таблице они не приведены.)

Как обрабатывать флажки в формах ASP.NET MVC?

241 Will [2008-10-21 00:30:00]

Внимание: этот вопрос старше пяти лет!

Ваш лучший вариант — поиск новых вопросов или поиск ответов ниже в поисках вашей конкретной версии MVC, так как многие ответы здесь устарели.

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

Это кажется мне немного странным, но насколько я могу судить, так оно и есть.

У меня есть набор объектов, и я хочу, чтобы пользователи выбирали один или несколько из них. Это говорит мне «форму с флажками». У моих объектов нет понятия «выбранный» (они являются рудиментарным POCO, образованным десериализацией вызова wcf). Итак, я делаю следующее:

И, в контроллере, это единственный способ увидеть, какие объекты пользователь проверил:

В первую очередь это причудливо, а во-вторых, для тех элементов, которые пользователь проверил, FormCollection перечисляет его значение как «true false», а не просто true.

Очевидно, что я что-то упускаю. Я думаю, что это построено с учетом идеи, что объекты в коллекции, которые действуют в форме html, обновляются с помощью UpdateModel() или через ModelBinder.

Но мои объекты не настроены для этого; означает ли это, что это единственный способ? Есть ли другой способ сделать это?

checkbox asp.net-mvc forms

22 ответа

261 Решение Dylan Beattie [2008-10-21 00:49:00]

Html.CheckBox делает что-то странное — если вы просматриваете исходный код на результирующей странице, вы увидите, что рядом с каждым флажком создается , в котором объясняются значения «истинные ложные», которые вы видите для каждой формы элемент.

Попробуйте это, что определенно работает на ASP.NET MVC Beta, потому что я только что попробовал.

Поместите это в представление вместо использования Html.CheckBox():

Все ваши флажки называются selectedObjects , а value каждого флажка — это GUID соответствующего объекта.

Затем перейдите к следующему действию контроллера (или что-то подобное, что делает что-то полезное вместо Response.Write())

В этом примере будут записываться только GUID из отмеченных вами полей; ASP.NET MVC сопоставляет значения GUID выбранных флажков в параметре Guid[] selectedObjects для вас и даже анализирует строки из коллекции Request.Form в объекты с включенным GUID, что, по моему мнению, довольно приятное.

HtmlHelper добавляет скрытый ввод, чтобы уведомить контроллер о статусе Unchecked. Итак, чтобы иметь правильный проверенный статус:

Если вам интересно, ПОЧЕМУ они помещают скрытое поле с тем же именем, что и флажок, причина такова:

Комментарий от исходного кода MVCBetaSourceMVCsrcMvcFuturesMvc ButtonsAndLinkExtensions.cs

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

Я думаю, что за кулисами им нужно знать это для привязки к параметрам в методах действий контроллера. Тогда вы могли бы иметь логическое состояние tri-state, предположительно (связанное с нулевым параметром bool). Я не пробовал, но я надеюсь, что это так.

Вы также должны использовать Checkbox 1 , потому что тогда люди могут нажимать на текст ярлыка, а также на флажок. Его также легче стилизовать, и, по крайней мере, в IE он будет выделен при входе в элементы управления страницы.

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

Я удивлен, что ни один из этих ответов не использовал встроенные функции MVC для этого.

Я написал сообщение в блоге об этом здесь, которое даже связывает метки с этим флажком. Я использовал папку EditorTemplate, чтобы сделать это чистым и модульным способом.

Вы просто получите новый файл в папке EditorTemplate, который выглядит следующим образом:

в вашем фактическом представлении, нет необходимости цитировать это, просто 1 строку кода:

Посетите мой сообщение в блоге для более подробной информации.

25 mmacaulay [2008-10-21 00:37:00]

Вот что я делал.

Я обнаружил, что хелпер-методы Html. * не очень полезны в некоторых случаях и что мне было лучше делать это в обычном старом HTML. Это один из них, другой, который приходит на ум, — это радио кнопки.

Изменить: это предварительный просмотр 5, очевидно, YMMV между версиями.

10 Fluffy [2010-03-20 23:36:00]

Кажется, что они предпочитают читать только первое значение, поэтому это «истинно», когда флажок установлен, и «false», когда включено только скрытое значение. Это легко получить с помощью кода, подобного этому:

8 nautic20 [2010-06-04 18:24:00]

@Дилан Битти Отличная находка. Я благодарю вас. Для дальнейшего расширения этот метод также отлично работает с подходом View Model. MVC настолько классный, он достаточно умен, чтобы привязать массив Guids к свойству с тем же именем объекта Model, связанного с представлением. Пример:

Любой, кто знаком с философией View Model, будет радоваться, это работает как Champ!

6 Darcy [2010-03-22 17:48:00]

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

Значения из представления передаются в действие, так как имена одинаковы.

Я знаю, что это решение не идеально подходит для вашего проекта, но я думал, что брошу эту идею там.

Я знаю, что этот вопрос был написан, когда MVC3 не вышел, но для тех, кто приходит к этому вопросу и использует MVC3, может потребоваться «правильный» способ сделать это.

Хотя я думаю, что выполнение всего

вещь замечательная и чистая, и работает во всех версиях MVC, проблема в том, что она не учитывает культуру (как если бы это имело значение в случае bool).

«Правильный» способ определить значение bool, по крайней мере в MVC3, заключается в использовании ValueProvider.

Я делаю это на одном из моих клиентских сайтов, когда я редактирую разрешения:

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

ValueProvider — это то, что используется, когда вы формируете свои действия следующим образом:

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

Из того, что я могу собрать, модель не хочет угадывать, была ли check = true или false, я обошел это, установив атрибут value в элементе checkbox с jQuery перед отправкой формы следующим образом:

Таким образом, вам не нужен скрытый элемент, чтобы сохранить значение этого флажка.

Эта проблема также возникает в версии 1.0. Html.Checkbox() вызывает добавление другого скрытого поля с тем же именем/идентификатором, что и в вашем исходном флажке. И когда я пытался загружать блок checkbox с помощью document.GetElemtentsByName(), вы можете догадаться, как все обманывается. Это странно.

То же, что и в ответе nautic20, просто используйте флажок привязки модели MVC по умолчанию с тем же именем, что и свойство коллекции string/int/enum в ViewModel. Вот и все.

Но одна проблема должна указывать. В каждом элементе флажка вы не должны помещать в него «Id», который повлияет на привязку модели MVC.

Читать еще:  Find link php

Следующий код будет работать для привязки к модели:

Следующие коды не будут привязываться к модели (разница здесь — это присвоенный идентификатор для каждого флажка)

2 kk-dev11 [2012-01-05 19:10:00]

Самый простой способ сделать это так.

Вы задаете имя и значение.

Затем при отправке возьмите значения флажков и сохраните их в массиве int. затем соответствующую функцию LinQ. Что это..

2 Jeroen [2010-10-22 19:07:00]

это то, что я сделал, чтобы потерять двойные значения при использовании Html.CheckBox(.

с четырьмя ящиками, отмеченными, непроверенными, непроверенными, проверенными правда, ложь, ложь, ложь, истина, ложь в правда, ложь, ложь, правда. просто то, что мне нужно

У меня была почти такая же проблема, но возвращаемое значение моего контроллера было заблокировано другими значениями.

Нашел простое решение, но оно кажется немного грубым.

Попробуйте ввести Viewbag. в свой контроллер, и теперь вы дадите ему имя, например Viewbag.Checkbool

Теперь переключитесь на представление и попробуйте @Viewbag.Checkbool с этим вы получите значение из контроллера.

Параметры моего контроллера выглядят следующим образом:

и мой флажок будет обновляться следующим образом:

0 eyesnz [2011-04-21 01:25:00]

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

Таким образом, выполнение «проверенного» или истинного теста будет следующим:

Выполнение ложной проверки:

Основное отличие состоит в том, чтобы использовать GetValues , поскольку он возвращается как массив.

Tech Tutorials

Tutorials and posts about Java, Spring, Hadoop and many more. Java code examples and interview questions. Spring code examples.

Friday, January 3, 2020

Spring MVC Checkbox And Checkboxes Form Tag Example

In this post we’ll see how to use checkbox and checkboxes provided by the form tag in the Spring MVC framework.

Technologies used

Following is the list of tools used for the Spring MVC checkbox and checkboxes form tag example.

  1. Spring 5.0.8 Release (Spring core, spring web, spring webmvc).
  2. Java 10
  3. JSTL tag library
  4. Tomcat server V 9.0.10
  5. Eclipse Photon 4.8.0 for Java EE development (This Eclipse version supports Java 10)

Spring MVC Project structure using Maven

  • Please refer Spring Web MVC Example With Annotations for getting the project structure using Spring XML configuration.
  • Please refer Spring Web MVC Java Configuration Example for getting the project structure using Spring Java configuration.

Maven Dependencies

Apart from Spring dependencies following dependency is also needed in the pom.xml for JSTL tags.

and tags in Spring MVC

  • — This tag renders an HTML ‘input’ tag with type ‘checkbox’. With this tag the value for the checkbox is hardcoded with in the JSP page.
  • — This tag renders multiple HTML ‘input’ tags with type ‘checkbox’. If you don’t want to list the value for the checkbox with in the JSP but want to provide a list of available options at runtime and pass that in to the tag then you can use checkboxes tag. You pass in an Array, a List or a Map containing the available options in the «items» property.

Spring MVC checkbox example

For the Spring MVC form checkbox example let’s assume there is a class UserPreferences which is used to list out preferences as check boxes in the JSP page.

Spring MVC checkbox example – Model Class

Spring MVC checkbox example – View

Following JSP (user.jsp) shows all the approaches to the checkbox tag in Spring MVC.

The check boxes with in the JSP are checked or left unchecked based on the following-

  • When the bound value is of type java.lang.Boolean, the input(checkbox) is marked as ‘checked’ if the bound value is true.
  • When the bound value is of type array or java.util.Collection, the input(checkbox) is marked as ‘checked’ if the configured value is present in the bound Collection.
  • For any other bound value type, the input(checkbox) is marked as ‘checked’ if the configured setValue(Object) is equal to the bound value.

The values for the properties are taken from an object of type UserPreferences bean which is bound using the attribute “modelAttribute” with in the form tag. The object is set with in the handler method of the Controller class.

There is another JSP that is used to display the values selected by checking the check boxes.

Spring MVC checkbox example – Configuration changes

Since JSTL tags are also used so you need to configure InternalResourceViewResolver to resolve a JstlView for that following configuration has to be added in the configuration file.

Spring MVC checkbox example – Controller class

In the Controller class, showUser() method is used to handle the /showUser request path. Method returns the view name as “user” which resolves to /WEB-INF/jsp/user.jsp JSP.

In the handler method object of UserPreferences class is set to the Model which is used in the JSP to mark the check box as checked or leave it unchecked. If you want some of the check boxes to be checked in the JSP by default then you can set the values for the properties in the UserPreferences object.

Another handler method showPreferences() handles the request when submit button is clicked in the user.jsp.

Deploying and testing the application

Once the application is deployed to Tomcat server it can be accessed using the URL- http://localhost:8080/spring-mvc/showUser

This is the page with the check boxes marked as checked for the properties set in the handler method of the controller class. In the page some more boxes are checked before clicking on submit button.

Page which shows all the values that are checked.

Spring MVC checkboxes tag example

If you want to provide the list of options for the checkbox at runtime rather than hardcoding them then you can add checkboxes tag in Spring MVC application. You pass in an Array, a List or a Map containing the available options in the «items» property.

Spring MVC checkboxes example – Model Class

Spring MVC checkboxes example – Views

As you can see now tag is used with the items property. The values used with the items property in the JSP prefMap and foodList should be available as a model attribute containing String of values to be selected from. If a Map is used, the map entry key will be used as the value and the map entry’s value will be used as the label to be displayed.

There is another JSP that is used to display the values selected by checking the check boxes.

Spring MVC checkboxes example – Controller class

As you can see prefMap and foodList which are used in the JSP to show options for checkboxes in the JSP are set here as model attribute. If you want some of the check boxes to be checked in the JSP then you can set the values for the properties in the UserPreferences object.

Deploying and testing the application

Once the application is deployed to Tomcat server it can be accessed using the URL- http://localhost:8080/spring-mvc/showUser

This is the page with the check boxes marked as checked for the properties set in the handler method of the controller class.

Page which shows all the values that are checked.

That’s all for this topic Spring MVC Checkbox And Checkboxes Form Tag Example. If you have any doubt or any suggestions to make please drop a comment. Thanks!

Managing Checkboxes And Radios In ASP.NET Razor Web Pages

Checkboxes and radio buttons cause more confusion than any other form control in ASP.NET Razor Web Pages. This article takes an in depth look at them and tackles the most frequently asked questions that they generate.

Checkboxes are used to enable users to select zero or more available options. Typical examples of usage might include providing a means for people to indicate which, if any, hobbies they like. Most commonly, you see checkboxes being used to provide the user with a means to signify acceptance of terms of use or similar. Radio buttons are generally used in groups and allow selection of only one of a group of options. You might use them to specify the postage option for shipping, or to choose between yes and no.

Both controls are types of the HTML element. The type attribute dictates the field type. For checkboxes, the type attribute must be «checkbox» . For radio buttons, the type is «radio «:

Alternatively, you might want to use the HTML form helpers that come with Web Pages to render your controls:

Name and Value attributes

A name attribute is required if you want to access the form control’s value when the containing form is submitted to the server. If you use the HTML helper, the string that you pass in to the helper method will be used for both the name and id attributes. The default value for both checkboxes and radio buttons is «on» . You can provide any other value to the value attribute, but if you omit it altogether, the default value is used. The following code demonstrates that:

If you run this page and check both boxes, the rendered result is as follows:

Читать еще:  Поле со списком php

chk2 value: my own value

When you submit a form, most controls within the form are added to the Request collection along with their value or an empty string if none was provided. This is not the case with radios and checkboxes. If they are not selected, they will not be added to the Request collection. That means they will be null in server-side code. They share this behaviour with the input that has a type attribute of ‘submit’. You can test this yourself with a simple form like this:

You can use the ObjectInfo helper to examine the values when you submit the empty form using the :

The output confirms that radios, checkboxes and input type=»submit» are all null if they are not checked or clicked:

You have to test to see if the checkbox, radio or submit is present in the collection before you attempt any operations on them, otherwise you will receive a NullReferenceException: «Object reference not set to an instance of an object». You can use the IsEmpty() helper to determine if a form value is present as it tests for null before it tests to see if an empty string is present.

Grouping

You can group checkboxes and radios together to add additional behaviour. You do this by supplying multiple elements with the same name attribute value:

This will result in 5 checkboxes, each with the name ‘check’ but with incrementing values from 1 — 5. When you group checkboxes, the user can select as many within the group as they like. When the containing form is posted, all the values of the checked boxes are received on the server as a comma-separated string. If all boxes are checked in the example above, the value of Request[«check»] will be «1,2,3,4,5» . Typically, you will want to process each value separately so you use the string.Split method to convert the string into an array that you can then iterate:

Radio buttons behave differently when you group them by providing them with the same name value. Only one radio within a group can be checked at any time. The only way to uncheck a radio is select another one in the same group. Therefore they are a good way to force a user to make a selection, especially if you set one of the radios as checked by default. You do that by setting the checked attribute value to ‘checked’, although browsers will also accept the presence of the checked attribute alone — or with any other value applied- as indicating the radio (or checkbox) has been selected. All of the following result in the element being checked — even if you try to apply ‘false’ as a value to the checked attribute:

Both of the last two will result in a checked radio in most browsers, but will not validate as HTML.

If you want to set the checked status of a radio or checkbox dynamically using Razor, you can take advantage of a Razor feature called Conditional Attributes that was introduced in version 2 of the Web Pages framework (MVC 4 onwards). To use this feature, you pass a boolean expression or variable into the checked attribute. If the expression resolves to ‘true’, Razor will render checked=»checked» to the browser. If it resolves to ‘false’, the checked attribute is not rendered at all. Here’s an example that will (rather uselessly) result in a checkbox being checked if it is rendered when the hour is even:

If you wanted to use the Html Helper, the syntax is as follows:

HTML Helpers

Having started to look at the Html helper in the previous example, it is worth exploring their use in a bit more detail. The Html helpers offer a more succinct syntax than their HTML counterparts and can help to minimise code in the view area of your page. Most of them also translate across to their MVC counterparts, so if there is a possibility that you may upgrade to MVC at some time, using the helpers will minimise the work required to migrate the View area. Note that the Razor Web Pages Html helpers are NOT the same as the MVC Html helpers. They come from different libraries. The Razor Web Pages helpers come from System.Web.WebPages.Html, whereas the MVC helpers are in System.Web.Mvc.Html.

You have already seen a couple of examples of the helpers’ use: the first example at the beginning of the article showed just a string being passed in to the helper method:

The string passed in will be used for both the name and id attribute. This default behaviour could cause a problem when grouping. It is perfectly acceptable to have multiple elements on the same page share the same name attribute value, but the id attribute value should be unique for each element. If you pass in the same string to multiple checkbox helpers, they will all share the same id as well as the same name. The way to get round that is to override the id value by passing in your own to the htmlAttributes parameter of the helper. You do this either by passing in an attribute and its value using a Dictionary or an anonymous type:

Both of these approaches result in 5 checkboxes, all with the same name, but with id values that increment from 1 to 5. So why are there two approaches to achieve the same outcome? Well, the anonymous type approach is by far the shorter syntactically, and would generally be preferred. An anonymous type is a proper C# type that acts as nothing more than a short-lived read-only type where you both declare property names and set their values using the object initialiser syntax. Once you realise that the left hand side of the equation is a property, you realise that it must conform to the rules that apply to naming properties in C#. In particular, you cannot use a hyphen in a property name. Most attributes do not include hyphens in their name, but the HTML5 custom ‘data-‘ attributes do. So if you want to specify the value if a ‘data-‘ attribute, you will have to use the dictionary approach:

The above example sets two attributes, data-custom and class . If you just wanted to set the class attribute value, you can use the anonymous type approach — but you need to prefix the word ‘class’ with an @ symbol:

This has nothing to do with Razor syntax. It is a requirement of C# since ‘class’ is a C# keyword. Generally, you should avoid using keywords for C# identifiers (including property names), but in this case it is unavoidable.

Client-side

While the focus of this article is the use of Checkboxes and radios in Razor programming, it is also worth briefly covering a couple of client-side questions that come up regularly: How do I determine the state of a checkbox or radio in client-side code? And how do I provide an easy way for users to select all checkboxes?

In both cases, jQuery is the library of choice for DOM querying and manipulation, so the solutions will feature its use. The easiest way to determine if a checkbox or radio is checked is to inspect its checked property:

This will return true if the checkbox belonging to the specified element is checked, and false if not.

The following code illustrates the Select All question and its solution.

One checkbox is labeled ‘Select All’. When this is checked, all the checkboxes with a class of ‘check’ will be checked too. The checkbox labeled ‘Select All’ is set to checked if all checkboxes with the class ‘check’ are checked. This is determined by creating two selectors — one that contains all checkboxes with the class ‘check’ and another that contains a sequence of checkboxes with the class ‘check’ that have been checked. The length property of both sequences is compared. Then a click event handler is added to ‘Select All’ which sets all the other checkboxes to the same state as itself. This allows the user to toggle the state of all checkboxes using the Select All option. Finally, a click event handler is added to each target checkbox, which updates the state of the ‘Select All’ checkbox based on the state of all the checkboxes with the class ‘check’.

Form Checkbox Inputs

For cross browser consistency, and use Bootstrap’s custom checkbox input to replace the browser default checkbox input. It is built on top of semantic and accessible markup, so it is a solid replacement for the default checkbox input.

Example 1: Single checkbox

Example 2: Multiple choice checkboxes

Feel free to mix and match options prop and in . Manually placed inputs will appear below any checkbox inputs generated by the options prop. To have them appear above the inputs generated by options , place them in the named slot first .

Checkbox group options array

options can be an array of strings or objects. Available fields:

  • value The selected value which will be set on v-model
  • disabled Disables item for selection
  • text Display text, or html Display basic inline html
Читать еще:  Лучшая защита от вирусов

value can be a string, number, or simple object. Avoid using complex types in values.

If both html and text are provided, html will take precedence. Only basic/native HTML is supported in the html field (components will not work). Note that not all browsers will render inline html (i.e. , , etc) inside elements of a .

Be cautious of placing user supplied content in the html field, as it may make you vulnerable to XSS attacks , if you do not first sanitize the user supplied string.

If an array entry is a string, it will be used for both the generated value and text fields.

You can mix using strings and objects in the array.

Internally, BootstrapVue will convert the above array to the following array (the array of objects) format:

Options as an array of objects

If value is missing, then text will be used as both the value and text fields. If you use the html property, you must supply a value property.

Internally, BootstrapVue will convert the above array to the following array (the array of objects) format:

Changing the option field names

If you want to customize the field property names (for example using name field for display text ) you can easily change them by setting the text-field , html-field , value-field , and disabled-field props to a string that contains the property name you would like to use:

Inline and stacked checkboxes

components render inline checkboxes by default, while renders block-level (stacked) checkboxes.

Set the prop stacked on to place each form control one over the other, or if using individual checkboxes not inside a , set the inline prop on .

Control sizing

Use the size prop to control the size of the checkbox. The default size is medium. Supported size values are sm (small) and lg (large).

Sizes can be set on individual components, or inherited from the size setting of .

Note: Bootstrap v4.x does not natively support sizes for the custom checkbox control. However, BootstrapVue includes custom SCSS/CSS that adds support for sizing the custom checkboxes.

Checkbox values and v-model

By default, value will be true when checked and false when unchecked. You can customize the checked and unchecked values by specifying the value and unchecked-value properties, respectively.

The v-model binds to the checked prop. When you have multiple checkboxes that bind to a single data state variable, you must provide an array reference ( [] ) to your v-model . Do not use the checked prop directly.

Note that when v-model is bound to multiple checkboxes (i.e an array ref), the unchecked-value is not used. Only the value(s) of the checked checkboxes will be returned in the v-model bound array. You should provide a unique value for each checkbox’s value prop (the default of true will not work when bound to an array)

To pre-check any radios, set the v-model to the value(s) of the checks that you would like pre-selected.

When placing individual components within a , most props and the v-model are inherited from the .

Note: the unchecked-value prop does not affect the native ‘s value attribute, because browsers don’t include unchecked boxes in form submissions. To guarantee that one of two values is submitted in a native submit (e.g. ‘yes’ or ‘no’ ), use radio inputs instead. This is the same limitation that Vue has with native checkbox inputs.

Multiple checkboxes and accessibility

When binding multiple checkboxes together, you must set the name prop to the same value for all s in the group individually or via the name prop of . This will inform users of assistive technologies that the checkboxes are related and enables native browser keyboard navigation.

Whenever using multiple checkboxes, it is recommended that the checkboxes be placed in a component to associate a label with the entire group of checkboxes. See examples above.

Button style checkboxes

You can optionally render checkboxes to appear as buttons, either individually, or in a group.

Button style checkboxes will have the class .active automatically applied to the label when they are in the checked state.

Individual checkbox button style

A single checkbox can be rendered with a button appearance by setting the prop button to true

Change the button variant by setting the button-variant prop to one of the standard Bootstrap button variants (see for supported variants). The default variant is secondary .

The inline prop has no effect on individual button-style checkboxes.

Grouped button style checkboxes

Render groups of checkboxes with the look of a button-group by setting the prop buttons on . Change the button variant by setting the button-variant prop to one of the standard Bootstrap button variants (see for supported variants). The default button-variant is secondary .

Switch style checkboxes

Switch styling is supported on and components.

Note: If the checkbox is in button mode, switch mode will have no effect.

Individual checkbox switch style

A single checkbox can be rendered with a switch appearance by setting the prop switch to true

Grouped switch style checkboxes

Render groups of checkboxes with the look of a switches by setting the prop switches on .

Switch sizing

Use the size prop to control the size of the switch. The default size is medium. Supported size values are sm (small) and lg (large).

Sizes can be set on individual components, or inherited from the size setting of .

Note: Bootstrap v4.x does not natively support sizes for the custom switch control. However, BootstrapVue includes custom SCSS/CSS that adds support for sizing the custom switches.

Non custom check inputs (plain)

You can have or render a browser native checkbox input by setting the plain prop.

Note: The plain prop has no effect when button or buttons is set.

Contextual states

Bootstrap includes validation styles for valid and invalid states on most form controls.

Generally speaking, you’ll want to use a particular state for specific types of feedback:

  • false (denotes invalid state) is great for when there’s a blocking or required field. A user must fill in this field properly to submit the form.
  • true (denotes valid state) is ideal for situations when you have per-field validation throughout a form and want to encourage a user through the rest of the fields.
  • null Displays no validation state (neither valid nor invalid)

To apply one of the contextual state icons on , set the state prop to false (for invalid), true (for valid), or null (no validation state).

Note: Contextual states are not supported when in button mode.

Contextual state and validation example

Required constraint

When using individual components (not in a ), and you want the checkbox(es) to be required in your form, you must provide a name on each in order for the required constraint to work. All components tied to the same v-model must have the same name .

The name is required in order for Assistive Technologies (such as screen readers, and keyboard only users) to know which checkboxes belong to the same form variable (the name also automatically enables native browser keyboard navigation), hence required will only work if name is set. will automatically generate a unique input name if one is not provided on the group.

Autofocus

When the autofocus prop is set on , the input will be auto-focused when it is inserted (i.e. mounted) into the document, or re-activated when inside a Vue component. Note that this prop does not set the autofocus attribute on the input, nor can it tell when the input becomes visible.

Indeterminate (tri-state) support

Normally a checkbox input can only have two states: checked or unchecked. They can have any value, but they either submit that value (checked) or don’t (unchecked) with a form submission (although BootstrapVue allows a value for the unchecked state on a single checkbox)

Visually, there are actually three states a checkbox can be in: checked, unchecked, or indeterminate.

The indeterminate state is visual only. The checkbox is still either checked or unchecked as a value. That means the visual indeterminate state masks the real value of the checkbox, so that better make sense in your UI!

supports setting this visual indeterminate state via the indeterminate prop (defaults to false ). Clicking the checkbox will clear its indeterminate state. The indeterminate prop can be synced to the checkbox’s state by v-binding the indeterminate prop with the .sync modifier.

Note: indeterminate styling is not supported in button or switch mode, nor is it supported in (multiple checkboxes).

Single Indeterminate checkbox:

Indeterminate checkbox use-case example:

Note: indeterminate is not supported in button mode, nor in multiple checkbox mode. Also pay attention that plain checkbox (i.e. with prop plain ) also supports indeterminate state on Windows/Linux/Mac/Android, but not on iOS.

Indeterminate state and accessibility

Not all screen readers will convey the indeterminate state to screen reader users. So it is recommended to provide some form of textual feedback to the user (possibly by via the .sr-only class) if the indeterminate state has special contextual meaning in your application.

Component reference

Component aliases

can also be used via the following aliases:

Note: component aliases are only available when importing all of BootstrapVue or using the component group plugin.

Ссылка на основную публикацию
Adblock
detector