I make a program. Use price and category to query the data in the database. Look at the picture below.
These two queries are optional. In other words, the user can select or not select these two options to query. I use radioGroup to check prices. Use checkboxGroup to query category. I found that when using radioGroup, I can check whether its value is empty to determine whether it is selected by the user. The statement is very simple.
if ($w(“#radioGroup1”).value === “” )
But this method does not work for checkboxGroup. I used 3 statements below
if ($w(“#checkboxGroup1”).value === “”)
if ($w(“#checkboxGroup1”).value === )
if ($w(“#checkboxGroup1”).value === null )
but them didn’t work. see the image below. My question is in programming, how to detect whether the checkboxGroup is selected ? Hope to get help.
Try this one…
if ($w("#checkboxGroup1").value[0] === "Landscape" )
if ($w("#checkboxGroup1").value[1] === "Animals" )
if ($w("#checkboxGroup1").value[2] === "Person" )
A group means that there are several values in it, right?
Like an ARRAY —> myArray = [] ----> [“Animals”, “Persons”, “Landscapes”, “and more”]
myArray[0] = ???
myArray[1] = ???
myArray[2] = ???
myArray[3] = ???
Test it yourself…
console.log(myArray[2])
console.log(myArray[0])
console.log(myArray)
let myArray = ["Animals", "Persons", "Landscapes", "and more"]
console.log(myArray[2])
console.log(myArray[0])
console.log(myArray)
The same system is used in CheckBoxGroups.
After your prompt, I found
If you just choose Animals, and don’t choose the other two. There will be
$w(“#checkboxGroup1”).value[0]===“Animals”
If you just choose Person, you don’t choose the other two. There will be
$w(“#checkboxGroup1”).value[0]===“Person”
So the sentence that can detect whether $w(“#checkboxGroup1) is selected by the user should be.
if ($w(”#checkboxGroup1").value[0]===“Landscape”|| $w(“#checkboxGroup1”).value[0]===“Animals”
|| $w(“#checkboxGroup1”).value[0]===“Person”)
So I use the following programming statement. The program executed very well now. Thank you very much.
export function button1_click(event) {
if ($w(“#checkboxGroup1”).value[0]===“Landscape”|| $w(“#checkboxGroup1”).value[0]===“Animals”
|| $w(“#checkboxGroup1”).value[0]===“Person”) {
$w(“#dataset1”).setFilter( wixData.filter()
.hasSome(“imageCategory”, $w(“#checkboxGroup1”).value)
)
.then( () => {
console.log(“Dataset is now filtered”);
})
.catch( (err) => {
console.log(“Dataset is not filtered”);
} );
}
}
Well done, good luck and happy coding.
P.S. Use CODE-TAGs in future… (just for CODE-SECTIONS)
$w("#checkboxGroup1").value[0]==="Animals"
//If you just choose Person, you don't choose the other two. There will be
$w("#checkboxGroup1").value[0]==="Person"
//So the sentence that can detect whether $w("#checkboxGroup1) is selected by the user should be.
if ($w("#checkboxGroup1").value[0]==="Landscape"|| $w("#checkboxGroup1").value[0]==="Animals"
|| $w("#checkboxGroup1").value[0]==="Person")
//So I use the following programming statement. The program executed very well now. Thank you very much.
export function button1_click(event) {
if ($w("#checkboxGroup1").value[0]==="Landscape"|| $w("#checkboxGroup1").value[0]==="Animals"
|| $w("#checkboxGroup1").value[0]==="Person") {
$w("#dataset1").setFilter( wixData.filter()
.hasSome("imageCategory", $w("#checkboxGroup1").value)
)
.then( () => {
console.log("Dataset is now filtered");
})
.catch( (err) => {
console.log("Dataset is not filtered");
} );
}
}
If the user starts to select $w (“#checkboxGroup1), the user then gives up choosing $w (”#checkboxGroup1). At this time, #dataset1 must be restored to its original state. The following is a program that includes the recovery process.
@laizhihong
Take a look at this filter here, perhaps you can learn from this little example…
https://russian-dima.wixsite.com/meinewebsite/blank-3
Or take also a look here, to see a little bit more advanced filter…
This code-part should be interessting for you…
//---------------------------------- USER-INTERFACE / настройки ----------------------------------------------------- User-Interface-------------------------------
var DATASET = "#dataset1"
var REFERENCE1 = "collection-filed1"
var REFERENCE2 = "collection-filed2"
var REFERENCE3 = "collection-filed3"
var REFERENCE4 = "collection-filed4"
var REFERENCE5 = "collection-filed5"
var REFERENCE6 = "collection-filed6"
//---------------------------------- USER-INTERFACE / настройки ----------------------------------------------------- User-Interface-------------------------------
export function DD0_change(event) {SEARCH_ENGINE()}
export function DD1_change(event) {SEARCH_ENGINE()}
export function DD2_change(event) {SEARCH_ENGINE()}
export function DD3_change(event) {SEARCH_ENGINE()}
export function DD4_change(event) {SEARCH_ENGINE()}
export function BTNsearch_click(event) {SEARCH_ENGINE(), $w('#table1').refresh()}
async function SEARCH_ENGINE() {
let filter = wixData.filter()
let item1, item2, item3, item4
//DD1-DD5 = DropDowns
if ($w('#DD0').value!=0) {item1 = $w('#DD0').value} //dropdown-1
if ($w('#DD1').value!=0) {item2 = $w('#DD1').value} //dropdown-2
if ($w('#DD2').value!=0) {item3 = $w('#DD2').value} //dropdown-3
if ($w('#DD3').value!=0) {item4 = $w('#DD3').value} //dropdown-4
//----------------------------------------------------------------------------------------------------------------------------
console.log(item1)
console.log(typeof item1)
// if(typeof item1=="string"){item1 = Number($w('#DD1').value)}
// if(typeof item3=="string"){item3 = Number($w('#DD3').value)}
if (item1!=0) {filter = filter.eq(REFERENCE1, item1)}
if (item2!=0) {filter = filter.eq(REFERENCE2, item2)}
if (item3!=0) {filter = filter.eq(REFERENCE3, item3)}
if (item4!=0) {filter = filter.eq(REFERENCE4, item4)}
console.log(filter)
await $w(DATASET).setFilter(filter)
}
And here one Check-Box-Filter with repeater…
https://russian-dima.wixsite.com/meinewebsite/checkbox-filter
@russian-dima I found the filter run very slow and not perfect. I will learn them later. Thanks a lot.
