Like many others, I’m getting defeated by checkbox filtering on Wix! I have two categories (Program Type and Client) that will have 5 checkboxes each (for a total of 10 checkboxes). As someone checks the boxes I want the data to filter as “OR” within the category and as “AND” between the categories.
So, in this example:
I want to filter for (“middle school” OR “adult”) AND (“adventure,” OR “Outdoor Education,” OR “Study Abroad”)
I have code that works for 1 checkbox at time, but does not work with multiple checkboxes and does not work with the AND / OR between categories:
export function checkbox1_change(event, $w) {
if($w("#checkbox1").checked === true){
wixData.query('Companies')
.eq('middleSchool', true)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w('#table1').rows = res.items;
$w('#repeater1').data = res.items;
});
} else {
// Clears the query when the checkbox is unchecked
wixData.query('Companies')
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w('#table1').rows = res.items;
$w('#repeater1').data = res.items;
});
}
}
I’ve coded a small amount a long time ago, but am very, very rusty. Any and all help is greatly appreciated!
Hi,
I recommend checking out this thread regarding filtering repeater using multiple user inputs. On the second step, instead of getting the value of the dropdown, you should get the value of the checkbox.
Thanks so much for that suggestion. I’ve look through that and tried to revamp my code. I’ve ended up with some code that sort of works, but not all the time. Here’s the code:
function filterProgram(results){
const filterArray = [];
if ($w('#checkbox6').checked === true){
filterArray.push('adventure');
}
if ($w('#checkbox7').checked === true) {
filterArray.push('outdoorEducation');
}
if ($w('#checkbox8').checked === true) {
filterArray.push('internship');
}
if ($w('#checkbox9').checked === true) {
filterArray.push('wildernessTherapy');
}
if (filterArray.length > 0){
var i = 0;
for (i = 0; i < filterArray.length; i++) {
wixData.query('Companies')
.eq(filterArray[0], true)
.or(wixData.query('Companies')
.eq(filterArray[i], true)
)
.ascending('companyName')
.find()
.then(res => {
$w('#repeater1').data = res.items;
});
}
}
return results;
}
export function checkbox6_change(event, $w) {
//Add your code for this event here:
filterProgram();
}
export function checkbox7_change(event, $w) {
//Add your code for this event here:
filterProgram();
}
export function checkbox8_change(event, $w) {
//Add your code for this event here:
filterProgram();
}
export function checkbox9_change(event, $w) {
//Add your code for this event here:
filterProgram();
}
I know something is wrong with the way I am using the “for” loop, but I don’t know how to use it properly with the wixData.query( ) function. Any suggestions?
Also, once this is completed, it will be a good “OR” statement for one category of filters - but I still need to combine this with an “AND” statement for my second category of filters (also checkboxes) and I’m not sure how to do that.
Hello there. Just to know. What datatype is the column you are filtering? I’ve had situations the filter doesn’t work in the eyes of the user but technically it does. NULL values are sometimes skipped. So does all the data in the database have a value? Also, you should be able to write
Hi,
You have set the data to the repeater but not to the repeater elements . Please check out the onItemReady documentation . Moreover, I recommend re-reading the code mentioned on the other thread to check what are the differences.
Hi Edgar, I’m hoping to implement search functionality, along with multiple checkbox filters. I think I read somewhere that you have implemented this. Would you be able to share code, or able to be hired to implement this on our site? Thanks very much!
I have a similar need and reference materials still do not answer this question. @kjohn493 did you ever get this to work as needed? If so, could you share how?
