> For the complete documentation index, see [llms.txt](https://docs.web3forms.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.web3forms.com/getting-started/examples/with-multiple-checkbox.md).

# With Multiple Checkbox

There are some confusions on how multiple checkboxes works and how to to integrate it with Web3Forms.

If you simply added a checkbox like this and sent the data to a regular form action, `check` would return `on` or `off` based on whether the user checked or not.

```html
<input type="checkbox" name="check">
```

However, if you need to add a value to your checkbox, you need to define it like this:

```
<input type="checkbox" name="check" value="checked">
```

Now, this would return `check: checked`

### Multiple Checkboxes

You need to add the same **name** with different values for multiple checkboxes. See:

```html

<label>Interests</label>
<input type="checkbox" id="coding" name="interest" value="coding" />
<input type="checkbox" id="music" name="interest" value="music" />

```

Web3Forms will then automatically parse them to be comma-separated like this:

```
Interests
coding,music
```

### Multiple Checkbox with Javascript

If you are using javascript, you have to manually stringify multiple data like this before sending the request to Web3Forms API. See example code:

```javascript
const formData = new FormData(form);
const interests = [];
 
form.querySelectorAll('input[name="interest"]:checked').forEach((checkbox) => {
    interests.push(checkbox.value);
});
  
formData.set('interest', interests);
```

This will set the checkbox as you intended.

#### Live Demo

{% embed url="<https://codepen.io/surjithctly/pen/eYobEbO>" %}
[View Codepen](https://codepen.io/surjithctly/pen/eYobEbO?editors=1010)
{% endembed %}