Identifying which Radiobutton is selected through code

Ask the community
,
1

I have a radiobuttongroup with three options. If user selects option 3, I want to expand a box on the page.

I’m trying to write an if statement in an on change event, so that the box expands if option 3 is selected, but stays collapsed with the two other options. How do I identify which option is selected with code?

Current code:

export function radiobuttongroup1_change(event) {
if ($w(‘#box’).collapsed) {

    $w('#box').expand(); 
} 
else     
    $w('#box').collapse();

}

Thank you.

2

Will, you will need to wrap another if statement around what you have above based on the value of the selectedIndex property.

https://www.wix.com/corvid/reference/$w.RadioButtonGroup.html#selectedIndex

3

Thanks Anthony. I didn´t quite understand how to set that up. I tried this but it doesnt work:

export function radiobuttongroup1_change(event) {
if ($w(‘#radiobuttongroup1’).selectedIndex = 3 {
$w(‘#box’).expand();

}

else
$w(‘#box’).collapse();

}

Could you show me how to write the code please?

Will

4

@lillewill , this will execute the expand/collapse code only when the index of the radiogroup is 3. Keep in mind that 0 is the first option, 1 is the second option index, and so on.

export function radiobuttongroup1_change(event) {  
  if ($w('#radiobuttongroup1').selectedIndex = 3 {    
    if ($w('#box').collapsed) {          
       $w('#box').expand();     
    } else {            
       $w('#box').collapse(); 
    }
  }
}
5

@tony-brunsman Thank you. The code makes sense, but I get an “unexpected token” with the first line of the code. Any idea why?

Link to editor (page “TESTINGSELECTEDINDEX”):
https://editor.wix.com/html/editor/web/renderer/edit/819b70fc-3fcf-4111-b1c2-6fcf6bbbad00?metaSiteId=6cc03581-1b96-43e4-85e1-5868b3ead1df&editorSessionId=23446f10-ee37-4c61-966a-595662d0aebc&referralInfo=dashboard

Thanks Anthony!

6

@lillewill Sorry, I should have tested it. There are a couple syntax issues: 1) it needs a parenthesis after the 3 and 2) there should be a triple equals sign signifying that it is a conditional expression and not an assignment:

export function radiobuttongroup1_change(event) {  
 if ($w('#radiobuttongroup1').selectedIndex === 3) {    
 if ($w('#box').collapsed) {          
       $w('#box').expand();     
    } else {            
       $w('#box').collapse(); 
    }
  }
}
7

@tony-brunsman Awesome it works! The third option expands the box now which is what I want. But when I click the other options, the box continues to be expanded, but they should then collapse. Any idea?

Thanks alot!

8

@tony-brunsman I figured it out! I removed the second if statement, and it works now. Thank you so much for your help, much appreciated!

export function radiobuttongroup1_change(event) {
//Add your code for this event here:

if ($w(‘#radiobuttongroup1’).selectedIndex === 2) {

   $w('#box').expand();      
}  **else**  {             
   $w('#box').collapse();  
}

}

9

WRONG Syntax
if ($w(’ #radiobuttongroup1 ').selectedIndex = 3 {

must be:
if ($w(’ #radiobuttongroup1 ').selectedIndex === 3 {