Does Tutorial Multiple Checkbox Group still exist?

Wappler General How To
#1

Several Docs written from the Bootstrap 4 years show Multiple Checkbox Group referred to here in the link below. I assume this refers to a Checkbox form group where multiple boxes can be checked, with the saved result producing an array of values separated by commas as the default Wappler setting.

Screenshot 2022-08-07 at 15.03.42
Screenshot 2022-08-07 at 15.03.42506×534 51.6 KB

Screenshot 2022-08-07 at 15.06.45
Screenshot 2022-08-07 at 15.06.452658×1444 472 KB

I’ve used this in the past to dynamically populate as many checkbox form options as the options table holds. So that the checkbox input only appears once in the code but as many as needed when the page is rendered online.

I just constructed a dynamic dropdown selector of multiple options with Wappler but wanted to convert it to the Multiple Checkbox group. I know I can code this manually for a Checkbox group but I was wondering whether I was missing the term Multiple Checkbox Group in Wappler components.

#2

There is no such a component in Wappler - i.e. a dropdown menu containing checkboxes.

Multiple checkbox group has nothing to do with a select menu and you cannot convert a select menu to a checkbox group.

If you want to achive such a behavior - a dropdown containing checkboxes, you need to get the code for the checkboxes and add it inside a dropdown, manually, using code view. The result will be something like:

<div class="dropdown">
            <button id="dropdown1" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" >
                Dropdown button
            </button>
            <div class="dropdown-menu px-2" >
                <div class="form-group mb-3" id="input1_group" is="dmx-checkbox-group">
                    <div class="form-check" dmx-repeat:repeat1="6">
                        <input class="form-check-input" type="checkbox" value="1" dmx-bind:id="'my_checkbox_' + $index+1" name="my_checkbox">
                        <label class="form-check-label" dmx-bind:for="'my_checkbox_' + $index+1">Item {{$index+1}}</label>
                    </div>
                </div>
            </div>
        </div>

you can style and adjust this as per your needs.

1 Like