Jump to content

Create multi select checkbox list

Recommended Posts


I need to create a multi-select checkbox list based on lookup table and save the input into text255 field.

Here is a solution I came up with:

1. Create a Listbox drop-down for your text field where you will store selected values:


2. Add the following JavaScript code snippet to the header/footer of your Form DataPage:

if (typeof main=='undefined') {
const dropDownSelector = '[name="InsertRecordFieldName"]'
const addRequiredSetupForHTMLSelect = (HTMLSelectElement) => {
HTMLSelectElement.setAttribute('multiple', true)
if(HTMLSelectElement.querySelector('option[value=""]')!==null) {
HTMLSelectElement.style.display = 'none'

const generateHTMLCheckboxTemplate = (display, value) => {
return `<div class="cbFormFieldCell">
         <span data-cb-name="cbFormDataCheckbox" class="cbFormData">
         <input type="checkbox" name="${display}" id="${display}" value="${value}" class="custom-checbox">
         <label for="${display}">${display}</label>

const addCheckboxesBasedOnHTMLSelectOptions = (HTMLSelectElement) => {

let value = option.getAttribute('value')
if(value!='') {
HTMLSelectElement.insertAdjacentHTML('beforebegin', generateHTMLCheckboxTemplate(option.innerText, value))

const syncCheckBoxWithSelect = (HTMLSelectElement, HTMLCheckbox) => {
HTMLCheckbox.addEventListener('change', (e)=>{
    let HTMLOptionEl = HTMLSelectElement.querySelector(`option[value="${e.target.getAttribute('value')}"]`)
    if(e.target.checked) {
        HTMLOptionEl.setAttribute('selected',  'selected')
    else {

const addEventListenersToCheckboxes = (HTMLSelectElement) => {
document.querySelectorAll('.custom-checbox').forEach(checkBox => {
syncCheckBoxWithSelect(HTMLSelectElement, checkBox)

const main = () => {
const HTMLSelectElement = document.querySelector(dropDownSelector)
document.removeEventListener('DataPageReady', main)

document.addEventListener('DataPageReady', main)


3. Substitute "InsertRecordFieldName" with the name of your respective text field that you can find in the source code of your page.

For example, in this case it will be "InsertRecordText_255_1"


So in the code, in this example, instead of

const dropDownSelector = '[name="InsertRecordFieldName"]'

It will be

const dropDownSelector = '[name="InsertRecordText_255_1"]'

The end solution will look something like this:

It can be checked here: https://c7eku786.caspio.com/dp/7f80b00033936335ac9d4603b996

Hope this helps somebody

Link to comment
Share on other sites

  • 7 months later...

Hello @Volomeister,

your script, provided above, for converting a listbox to multiselect checkboxes is fantastic and works great... thank you so much for posting it. But (unfortunately sometimes there is a but): while I have used it in a couple of datapages and tested it in the Caspio preview mode of said datapages and it works/looks great, as soon as I added it to a webpage (I've tried both a pure HTML page as well as a WordPress page) it simply does not work. The JS script appears to be running, but the conversion to checkboxes and multiselect is not taking effect.

Do you have any thoughts about why this might be happening? Any guidance or solution will be much appreciated.


Link to comment
Share on other sites

Hello @APTUS

It appears to be an overlap with function naming in the script and wordpress. "main" function in the script has a counterpart in wordpress. To make it work, just rename the "main" function to something different, for example "mainDataPageReadyHandler"
Just substitute "main" to "mainDataPageReadyHandler" everywhere in the script and it should work when deployed on wordpress and other places

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...