I create IonRadioGroup with IonRadio and i try to style when i check radio it will change style. But it’s just work when IonRadio not use display: none. When i use display: none it not trigger.
this image i style radio opacity: 0; it work.
<IonList>
<IonText className="cleaning__title">
How many bathrooms / toilet?
</IonText>
<IonRadioGroup
value={selected}
onIonChange={(e) => setSelected(e.detail.value)}
>
<IonList className="listRadio">
<IonItem
lines="none"
className="ion-no-padding ion-no-margin noPad"
>
<IonRadio
className="styleRadio"
slot="start"
value="1 Toilet"
/>
{selected === "1 Toilet" ? (
<IonList>
<IonImg className="iconRadio showIcon" src={iconCheck} />
<IonList className="listRadio__item checkList">
<IonLabel className="flexLabelCleaning">
<IonLabel className="blueNum">1</IonLabel>Toilet
</IonLabel>
</IonList>
</IonList>
) : (
// <IonImg className="iconRadio showIcon" src={iconCheck} />
<IonList>
<IonImg
className="iconRadio hiddenIcon"
src={iconCheck}
/>
<IonList className="listRadio__item">
<IonLabel className="flexLabelCleaning">
<IonLabel>1</IonLabel>Toilet
</IonLabel>
</IonList>
</IonList>
)}
{/* <IonImg className="iconRadio showIcon" src={iconCheck} />
<IonList className="listRadio__item checkList">
<IonLabel className="flexLabelCleaning">
<IonLabel className="blueNum">1</IonLabel>Toilet
</IonLabel>
</IonList> */}
</IonItem>
</IonList>