---
title: Individual Checkbox Comments
product: Form Library
description: Learn how to allow users to leave comments on individual checkbox options in a SurveyJS form. When respondents select a specific checkbox, a comment field appears next to it so they can provide additional context or feedback for that particular choice.
framework: jQuery
source: https://surveyjs.io/form-library/examples/individual-checkbox-comments/jquery
index: https://surveyjs.io/form-library/examples/overview.md
---

# Individual Checkbox Comments (jQuery)

Any SurveyJS question can include a comment area that allows users to explain or elaborate on their answer. For select-based questions—such as Dropdown, Radio Button Group, and Checkboxes—you can also enable comment areas for individual choice options. This example demonstrates how to configure and use this feature.

## Individual Choice Comments Configuration

To enable a comment area for a specific choice option, set its `showCommentArea` property to `true`. You can also set the `isCommentRequired` property to make the comment mandatory when that option is selected.

To guide users on what to enter in the comment area, use the [`commentPlaceholder`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#commentPlaceholder) property. You can set this property within a choice item configuration object to apply the placeholder only to that item or set it on the question level to apply the same placeholder to all comment areas.

## Data Format

When individual choice comments are enabled, the question's value format changes as follows:

- For single-choice questions (e.g., Dropdown or Radio Button Group), the value changes from a primitive to an object.
- For multiple-choice questions (e.g., Checkboxes), the value changes from an array of values to an array of objects.

Each object contains the following properties:

- `value`\
A selected choice value. You can rename this property using the question's [`valuePropertyName`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#valuePropertyName) setting.

- `comment`\
A comment provided for that choice.

**Example:**

When individual choice comments are disabled:

```js
{
  "car": [
    "Ford",
    "Volkswagen"
  ]
}
```

When individual choice comments are enabled:

```js
{
  "car": [
    {
      "value": "Ford",
      "comment": "Comment for Ford"
    },
    {
      "value": "Volkswagen",
      "comment": "Comment for Volkswagen"
    }
  ]
}
```

## "Other" Choice Item Configuration

The "Other" item lets users provide a custom answer not listed in the choices. To enable it, set the question's [`showOtherItem`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#showOtherItem) property to true.

The "Other" comment area inherits the question-level [`commentPlaceholder`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#commentPlaceholder) value, if set. You can override it using the [`otherPlaceholder`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#otherPlaceholder) property.

Checkbox questions also support other special choice options, such as "None", "Select All", "Don't Know", and "Refuse to Answer". For more details, refer to the Documentation section in the Checkboxes Question demo:

[View Checkboxes Question Demo](https://surveyjs.io/form-library/examples/create-checkboxes-question-in-javascript/ (linkStyle))

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import $ from "jquery";
import { Model } from "survey-core";
import "survey-js-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

const survey = new Model(json);
survey.onComplete.add((sender, options) => {
    console.log(JSON.stringify(sender.data, null, 3));
});
survey.data = {
  "car": [
    {
      "value": "Ford",
      "comment": "I currently drive a Ford Focus, and it's been a great everyday car. It's reliable, efficient, and comfortable on long drives."
    },
    {
      "value": "Volkswagen",
      "comment": "I own a Volkswagen Golf, and I love how solid and well-built it feels. The interior is surprisingly refined, and it's fun to drive."
    }
  ]
};

$("#surveyElement").Survey({ model: survey });
```

### `src/json.js`

```js
export const json = {
  "elements": [
    {
      "type": "checkbox",
      "name": "car",
      "title": "Which is the brand of your car?",
      "description": "If you own cars from multiple brands, please select all of them.",
      "choices": [
        { 
          "value": "Ford",
          "showCommentArea": true
          // "isCommentRequired": true,
          // "commentPlaceholder": "Placeholder for this particular choice option"
        },
        { "value": "Vauxhall", "showCommentArea": true },
        { "value": "Volkswagen", "showCommentArea": true },
        { "value": "Nissan", "showCommentArea": true },
        { "value": "Audi", "showCommentArea": true },
        { "value": "Mercedes-Benz", "showCommentArea": true },
        { "value": "BMW", "showCommentArea": true },
        { "value": "Peugeot", "showCommentArea": true },
        { "value": "Toyota", "showCommentArea": true },
        { "value": "Citroen", "showCommentArea": true }
      ],
      "showOtherItem": true,
      "otherPlaceholder": "Please specify the car's make and model and share your impressions.",
      "commentPlaceholder": "Please specify the car's model and share your impressions.",
      "showNoneItem": true
    }
  ]
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "jquery": "latest",
    "survey-core": "latest",
    "survey-js-ui": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/individual-checkbox-comments/angular.md)
- [React](https://surveyjs.io/form-library/examples/individual-checkbox-comments/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/individual-checkbox-comments/vue3js.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/individual-checkbox-comments/vanillajs.md)