Using checkboxes to combine filters

Context: The webpage is used as property directory. I have a table connected to a dataset with the property information. Above the table I have 4 checkboxes with different Regions. The Regions correspond with a field in the dataset, ‘regions.’

Goal: The user should be able to use the checkboxes to filter the table to only show the properties located in the selected Regions. If I check ‘San Fernando Valley’ and ‘Central LA,’ for example, I should only see properties that have either ‘San Fernando Valley’ or ‘Central LA’ in their region field.

The below code is as far as I got before getting stuck. Any advice on how to handle multiple selections would be helpful. Currently the logic only recognizes one checkbox at a time, even if I have multiple boxes selected:

export function sfvCheck_change() {
if ($w(‘#sfvCheck’).checked)
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘region’, ‘San Fernando Valley’));
else
$w(‘#dataset1’).setFilter(wixData.filter());
}

export function wstCheck_change() {
if ($w(‘#wstCheck’).checked)
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘region’, ‘West LA/Southbay’));
else
$w(‘#dataset1’).setFilter(wixData.filter());
}

export function centralCheck_change() {
if ($w(‘#centralCheck’).checked)
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘region’, ‘Central LA’));
else
$w(‘#dataset1’).setFilter(wixData.filter());
}

export function antelopeCheck_change() {
if ($w(‘#antelopeCheck’).checked)
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘region’, ‘Antelope Valley’));
else
$w(‘#dataset1’).setFilter(wixData.filter());
}

Hi,
I recommend checking out the explanation here regarding filtering table data using multiple user input fields.

Best,
Tal.

I’m not sure whats going on in that example.

What are #positionsManagementDataset and #tableJobs referencing? Also, what is the user using to filter? A dropdown?

Hi Adam,
#positionsManagementDataset is dataset and #tableJobs referring to a table element.
The user in the example above is using javascript methods.

Roi

Can I hire a Wix developer to implement this? I have an approaching launch date and need to get this done…

Hi Adam.

I just made a three checkbox filter on a dataset for someone (near same requirements as you have). I can’t post the example screen shot right now for it isn’t my data which will be visible in it. I’ll ask permission for it. However, I started out your way. When doing a ‘onClick’ function it neatly adds it to the code. Just like you have your functions above. But they only work with one filter. So I did it differently.

I still have the three ‘click’ functions which do one or to things, but they don’t filter. Instead they call a fourth function ‘filterSelection(event, $w)’. In this function I first get the values of the checkboxes and then process filtering as was required. This way you can make you ‘multi filters’. So in your case when you have everything checked and uncheck ‘sfvCheck’ and ‘centralCheck’ if will show the remainder.

Edgar, that would be super helpful. Would you be interested in implementing similar code for me on my site for a flat fee?

Sure you can find a contact link in my profile with some other info.

Hi Edgar. I’m also a newbie to coding. I’m trying to set up a similar thing for my website, which is for recipes. I’d like to use radio buttons to filter my gallery of all recipes by categories. I have a lot of categories (about 20) and would like users to be able to select multiple options. Were you able to get permission to copy your code from the above example? Would be super helpful! Thanks, Lucy

any chance you can share the code?