Form with conditional checkbox group

Ask the community
,
1

I’m trying to build a form which include checkbox group, each option should expand relevant collapsed fields. The user can choose more than one option.

For example:

If x is checked than expand y
But also if x2 is checked than expand y2.

Currently there are 8 options, there will be mor in the future.

How do I deal with this?

2

Let say that the first checkbox (value “1” ) opens an input element with ID input1 and the second option (value “2” ) should open input2 and so on.
So do something like:

let numberOfCheckboxes = 8;
let ids = [];
for (let i = 0; i < numberOfCheckboxes; i++){
ids.push((i + 1).toString);
}
$w.onReady(() => {
$w("#checkboxGroup").onChange(event => {
const selected = $w("#checkboxGroup").value;
const notSelected = ids.filter(e => !selected.includes(e));
notSelected.forEach(e => $w("#input" + e).collapse());
selected.forEach(e => $w("#input" + e).expand());
})
})

Make sure to use these values or modify the code.

P.S [fixed]

3

Many thanks for the reply.

I have tried it and made some progress, but its expanding the same collapsed box no matter which checkbox I selected.

Lets say one of the checkboxes value is 45001 and the other is 9301 and I have different collapsed boxes that I want t expand for each one of the checkboxes, the ID of the box I want to expand when the 45001 is checked is “box45001” and the ID of box I want to be expand when the 9301 is check is “box 9301”, how should I configure the values?

4

@urstomer just use my code and instead of

notSelected.forEach(e=>$w("#input"+ e).collapse());
selected.forEach(e=>$w("#input"+ e).expand());

Use:

notSelected.forEach(e=>$w("#box" + e).collapse()); 
selected.forEach(e => $w("#box" + e).expand());