Open display with items pre-checked in Checkbox Group

Ask the community
,
1

On my “test” page I have a single multi Checkbox Group with 2 items.


clearCheckbox() will empty the checkbox of all existing labels you see there. Then setOptions ( product , checkboxGroupOptions ) will add multiple new labels and values to the checkbox group.

Then, when the user clicks on the checkbox the $w ( “#checkboxGroup1” ). onChange(…) function will automagically add a check to the 3rd item (index 2 as defined in the “numb” variable). All this works fine for a single “numb” as I have described it.

However I have two problems…

  1. I need the page to display with the 3rd item pre-checked since there is no requirement to check any other items.

  2. I need to tweak this resulting code to cover more than one checked items.

I hope I have described the problems in enough detail to understand my coding questions. I do appreciate any ideas or comments you may wish to offer.

Thanks very much.

P.S. As you look this over, you observe a better way to clear the Checkbox group than what I have done. Please do not hesitate to comment.

import wixData from ‘wix-data’ ;
//these values will be set by other functions on the “real” page
let numb = 2
let product = “Carlson Brx7–”
let len = 0
let checkboxGroupOptions = $w ( “#checkboxGroup1” ). options ;

clearCheckbox1 ()
setOptions ( product , checkboxGroupOptions )

$w . onReady ( **function**  () { 
    //Force an item to be checked 
    $w ( "#checkboxGroup1" ). onChange ( ()=> {  
        **let**  selected  =  $w ( "#checkboxGroup1" ). selectedIndices ; 
        console . log ( selected ) 
        **if**  ( selected . includes ( numb )) { 
            console . log ( '..selected index does include ' ,  numb ) 
        }  **else**  { 
            console . log ( '..selected index does NOT include ' ,  numb ) 
            //console.log('Before adding 1 :', selectedIndices) 
            selected . push ( numb ); 
            $w ( "#checkboxGroup1" ). selectedIndices  =  selected ; 
            console . log ( "After adding "  +  numb  +  " :" ,  selected ) 
        } 
    }) 
}); 

**async function**  setOptions  ( product , checkboxGroupOptions ) {   //This code adds optional products for a specific "product" 
    **const**  results  =  **await**  wixData . query ( "OptionalProducts" ) 
        . eq ( "productName" ,  product )  // Query the "name" field for the selected "prodName" 
        . find (); 
            console . log ( 'inside wixdata.query("OptionalProducts")...productName: ' , results . items [ 0 ]. productName ) 
            //console.log("results", results.items.length + " of them ", results.items[0].accessory) 
    **for**  ( **let**  i  =  0 ;  i  < results . items . length ;  i ++) { 
        checkboxGroupOptions . push ({ "label" : results . items [ i ]. accessory ,  "value" :  results . items [ i ]. price . toLocaleString ( 'en' )}); 
        //console.log (i, checkboxGroupOptions) 
    } 
    $w ( "#checkboxGroup1" ). options =  checkboxGroupOptions 
    console . log ( "options are: " ,  checkboxGroupOptions ) 
} 

**function**  clearCheckbox1 () {    //This code clears away all existing labels  
    len  =  checkboxGroupOptions . length 
    **if**  (  len  >  0  ) {  
        **for**  ( **let**  j = 0 ;  j < len  ;  j ++) { 
            checkboxGroupOptions . shift () 
            //console.log( "inside j loop: ",checkboxGroupOptions) 
        } 
    } 
}