Checkboxes Question

Loading...
Sorry, we can't retrieve the data from server. Please comeback later.

A Checkboxes question displays a set of clickable checkboxes. Respondents can select one or multiple checkboxes to give their answer. This demo shows how to create and configure a Checkboxes question in SurveyJS Form Library. Switch between Angular, Vue, Knockout, jQuery, and React to view an example for your JavaScript framework.

Create a Checkboxes Question

To create a Checkboxes question, define an object with the type property set to "checkbox" and add it to the elements array. Use the choices array to specify choice values. Each object in this array should have the following structure:

{
  "value": any, // A unique value to be saved in the survey results.
  "text": String // A display text. When `text` is undefined, `value` is used as display text.
}

If you need to specify only the value property, you can set the choices property to an array of primitive values as shown in this demo. These values are both saved in survey results and used as display text.

You can also load choice values from a RESTful service. In this case, use the choicesByUrl property instead of the choices array. Refer to the ChoicesRestful object for information on how to configure this property. The demo on this page defines local choices.

Display Special Choices

A Checkboxes question supports the following special choice items:

Special choice item Description Display the item Change caption
Select All Allows respondents to select or unselect all checkboxes with one click. showSelectAllItem selectAllText
None Used when none of the proposed options suit a respondent. showNoneItem noneText
Other Allows respondents to enter their own option into a comment area. showOtherItem otherText

When respondents select "Other", the value they enter into the comment area is saved in a separate property. The property name is composed of the question name and commentSuffix. For example, if the question name is "car", the survey result will be as follows:

{
  "car": "other",
  "car-Comment": "Custom value"
}

If you want to use the question name as a key to store the comment value, disable the storeOthersAsComment property in SurveyModel. In this case, you will get the following survey result:

{
  "car": "Custom value"
}

Arrange and Sort Checkboxes

You can arrange checkboxes in multiple columns. Assign the desired number of columns to the colCount property. In this demo, you can select between 0, 1, 2, and 3 columns. When colCount is 0, checkboxes are arranged in a single line and wrapped to the next line if they do not fit.

Choices are sorted according to the choices array. If you want to sort them in ascending or descending alphabetical order, assign "asc" or "desc" to the choicesOrder property. Alternatively, you can set this property to "random". In this case, choices are sorted in random order each time your survey is displayed. You can change the sort order at runtime in this demo.

Special choices ("Select All", "None", and "Other") can be displayed on individual rows. Enable the separateSpecialChoices property for this layout.

Limit the Number of Selected Choices

If you want to specify a maximum number of choices that respondents can select, assign this number to the maxSelectedChoices property. Note that the Select All functionality becomes unavailable. In this demo, you can change the maxSelectedChoices value at runtime.

Settings

Column count:

Choice order:

Maximum selected choices:

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.