If/Then Statements with Checkboxes and Repeater

Ask the community
,
1

Hello! I am trying to apply a filter to a repeater using multiple checkboxes. I want the repeater to be filtered based on which box or combination of boxes is checked. For some reason, it only wants to run the “else” statement of the first “if” statement. I have attached the code below. All help would be appreciated!

Code:
import wixData from ‘wix-data’ ;

$w . onReady ( function () {
});

let isChecked1 = $w ( “#checkbox1” ). checked ;
let isChecked2 = $w ( “#checkbox2” ). checked ;
let isChecked3 = $w ( “#checkbox3” ). checked ;
let isChecked4 = $w ( “#checkbox4” ). checked ;

function setFilter ( ) {
if ( isChecked1 ) {
if ( isChecked2 ) {
if ( isChecked3 ) {
if ( isChecked4 ) {
// All Checked - HU GO TO LI
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. contains ( ‘slug’ , “hu” )
. contains ( ‘slug’ , “go” )
. contains ( ‘slug’ , “to” )
. contains ( ‘slug’ , “li” ))
console . log ( “ALL” )
} else {
// HU GO TO _
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. contains ( ‘slug’ , “hu” )
. contains ( ‘slug’ , “go” )
. contains ( ‘slug’ , “to” ))
console . log ( “HU GO TO” )
}
} else {
if ( isChecked4 ) {
// HU GO _ LI
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. contains ( ‘slug’ , “hu” )
. contains ( ‘slug’ , “go” )
. contains ( ‘slug’ , “li” ))
console . log ( “HU GO LI” )
} else {
// HU GO _ _
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. contains ( ‘slug’ , “hu” )
. contains ( ‘slug’ , “go” ))
console . log ( “HU GO” )
}
}
} else {
if ( isChecked3 ) {
if ( isChecked4 ) {
// HU _ TO LI
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. contains ( ‘slug’ , “hu” )
. contains ( ‘slug’ , “to” )
. contains ( ‘slug’ , “li” ))
console . log ( “HU TO LI” )
} else {
// HU _ TO _
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. contains ( ‘slug’ , “hu” )
. contains ( ‘slug’ , “to” ))
console . log ( “HU TO” )
}
} else {
if ( isChecked4 ) {
// HU _ _ LI
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. contains ( ‘slug’ , “hu” )
. contains ( ‘slug’ , “li” ))
console . log ( “HU LI” )
} else {
// HU _ _ _
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. contains ( ‘slug’ , “hu” ))
console . log ( “HU” )
}
}
}
} else {
if ( isChecked2 ) {
if ( isChecked3 ) {
if ( isChecked4 ) {
// _ GO TO LI
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. contains ( ‘slug’ , “go” )
. contains ( ‘slug’ , “to” )
. contains ( ‘slug’ , “li” ))
console . log ( “GO TO LI” )
} else {
// _ GO TO _
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. contains ( ‘slug’ , “go” )
. contains ( ‘slug’ , “to” ))
console . log ( “GO TO” )
}
} else {
if ( isChecked4 ) {
// _ GO _ LI
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. contains ( ‘slug’ , “go” )
. contains ( ‘slug’ , “li” ))
console . log ( “GO LI” )
} else {
// _ GO _ _
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. contains ( ‘slug’ , “go” ))
console . log ( “GO” )
}
}
} else {
if ( isChecked3 ) {
if ( isChecked4 ) {
// _ _ TO LI
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. contains ( ‘slug’ , “to” )
. contains ( ‘slug’ , “li” ))
console . log ( “TO LI” )
} else {
// _ _ TO _
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. contains ( ‘slug’ , “to” ))
console . log ( “TO” )
}
} else {
if ( isChecked4 ) {
// _ _ _ LI
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. contains ( ‘slug’ , “li” ))
console . log ( “LI” )
} else {
// None Selected - HU GO TO LI
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. contains ( ‘slug’ , “hu” )
. contains ( ‘slug’ , “go” )
. contains ( ‘slug’ , “to” )
. contains ( ‘slug’ , “li” ))
console . log ( “NONE” )
}
}
}
}
}

export function checkbox1_change ( event ) {
setFilter ()
}

export function checkbox2_change ( event ) {
setFilter ()
}

export function checkbox3_change ( event ) {
setFilter ()
}

export function checkbox4_change ( event ) {
setFilter ()
}

2

Your code never gets the value of the checkboxes (checked or not). You need to get the checked value inside of the setFilter() function, something like this:

function setFilter() {
    let isChecked1 = $w("#checkbox1").checked;
    let isChecked2 = $w("#checkbox2").checked;
    let isChecked3 = $w("#checkbox3").checked;
    let isChecked4 = $w("#checkbox4").checked;

    if (isChecked1) {
        if (isChecked2) {
        
        ... the rest of your code ...
3

Thank you Yisrael! That solved the issue. I appreciate your help!