Help with onChange and Checkbox Groups?

Ask the community
,
1

I’m currently trying to accomplish an onChange show/hide with a Checkbox Group if one specific checkbox is selected, but my code will not fire. Any help is appreciated.

This is what I currently have. The value of my third checkbox in the group is M324 and I have the box I want to show/hide hidden on load.

export function checkboxGroup2_change(event) {
if ($w(‘#checkboxGroup2’).value === “M324”)
$w(‘#group29’).show()
else
$w(‘#group29’).hide()
}
2

Because multiple choices are possible, Corvid stores the value(s) in an array. If only one is checked, this statement would make your logic work because it’s the first value in the array with the index of 0, but you will want to loop through the values to see if it is one of those checked, in case there are multiples.

export function checkboxGroup2_change(event) {
console.log($w('#checkboxGroup2').value);
if ($w('#checkboxGroup2').value[0] === "M324")
    $w('#group29').show()
else
    $w('#group29').hide()
}

It’s always good to do a console.log to see what you are dealing with.

3

Hi there, thanks so much for the response. That worked for me when my specific checkbox is selected, but if someone were to select other boxes in addition to the checkbox specified in the code, then the function no longer works. Any advice there?

4

@scottgross This would be a loop through approach:

export function checkboxGroup2_change(event) {
    let isChecked = false;
    $w('#checkboxGroup2').value.forEach((ChkboxValue) => {
        if (ChkboxValue === "M324"){
            isChecked = true;
        }
    })
    if (isChecked === true){
        $w('#group29').show();
    } else {
        $w('#group29').hide();
    }
}
5

@tony-brunsman You’re awesome. Thanks so much for the help!

6

@tony-brunsman I’m trying to change the value of a text input based on two different checkbox groups… I’m hoping you can help me with that too?

This is all part of a registration form for a sports club program (I don’t want any payments going through the site at this point in time so think of it more as a quote).

The two groups are #coedCheckboxGroup and #mensCheckboxGroup and each group has 3 options.

I then have a read-only #paymentDueInput which I would like to set the value of depending on what the user has selected (this should show the added cost of each program the user selects).

2405×821 69.9 KB

So what I need is an onChange event that sets the value of #paymentDueInput when the user selects one or more options in each of the checkbox groups…

e.g. if they select “Coed, Spring & Summer 2021” the value would set to “$160.00” and if they select “Coed, Spring 2021” and “Mens, Spring & Summer 2021” the value would set to “$249.00” etc.

I have looked at checkbox groups in the velo API reference but I’m not really sure how I would use that in the page code.

Thanks in advance :slight_smile:

7

@lisamthorpe You could loop through the selectedIndices array for each checkbox group like this:

$w.onReady(function () {
    $w("#coedCheckboxGroup").onChange((event) => {
        TotalProgramCost();
    })
    $w("#mensCheckboxGroup").onChange((event) => {
        TotalProgramCost();
    })
});

export function TotalProgramCost(){
    let totalCost = 0;
    $w("#coedCheckboxGroup").selectedIndices.forEach((indice) => {
        totalCost = (indice === 2) ? totalCost + 160:totalCost + 89;
    })
    $w("#mensCheckboxGroup").selectedIndices.forEach((indice) => {
        totalCost = (indice === 2) ? totalCost + 160:totalCost + 89;
    })
    $w("#paymentDueInput").value = totalCost;
}
8

if ( $w ( "# checkboxGroup2 " ). value . includes ( " M324 " )) {
$w ( "# group29 " ). show ()
} else {
$w ( "# group29 " ). hide ()
}