How do I get values from CheckboxGroup in a repeater?

Ask the community
, ,
1

Hi,

I’m creating a survey where I have conditional logic based on the answers to the first question. Based on the answers selected, I will populate additional questions. I’d like to use a repeater to show the additional questions, and each of those questions are a multi checkbox question.

However, I’m having trouble getting the value of the multi check box on change. This worked before with a slider, but it’s not working with a multi checkbox. Here’s my code below:

$w( ‘#multipleChoiceQuestion’ ).onChange(event => {
let updatedSelections = event.syntheticEvent.value;
console.log( "Answer options changed to " +updatedSelections);;
dataset.setFieldValue(propertyName, updatedSelections);
})

This time, in the event object, I can’t seem to find the answer options that have been selected by the user on the fly. I need to do this so I can store the checked answers into the correct property in the data collection (and also retrieve if a user clicks a back button).

Any guidance on this? Really hoping to use a repeater so I only have to format this bank of questions once.

2

https://www.wix.com/velo/reference/$w/checkboxgroup/selectedindices

3

I think you will need to use onItemReady for this:
https://www.wix.com/velo/reference/$w/repeater/onitemready

4

This is brilliant! Yes the combination of these two comments fixed my problem I think completely. For folks that would benefit from seeing what worked, I needed to embed the selectedIndices method into the onItemReady function for my repeater. Before I did that, selectedIndices was returning the selected options of the dummy placeholder question that I was overwriting in my repeater. Updated code:

$w( “#repeater” ).onItemReady(($item, itemData, index) => {

**const**  repeatedOptions = $item( "#options" ); 
     
$item( "#question" ).text = itemData.question; 
     repeatedOptions.options = itemData.options; 

     repeatedOptions.onChange((event => { 
	 **let**  updatedSelections = repeatedOptions.selectedIndices; 
             console.log(updatedSelections); 
        }))

})

$w( “#repeater” ).data = currentQuestion;

5

Well done, but next time you should better use CODE-BLOCK to show your code like this…

$w("#repeater").onItemReady(($item, itemData, index) => {
    const repeatedOptions = $item("#options");
    $item("#question").text = itemData.question;
    repeatedOptions.options = itemData.options;
    
    repeatedOptions.onChange((event => {
        let updatedSelections = repeatedOptions.selectedIndices;
        console.log(updatedSelections);
    }))
 })

$w("#repeater").data = currentQuestion;