# Radio unchecks when toggling if.bind (Solved)

**URL:** <https://discourse.aurelia.io/t/radio-unchecks-when-toggling-if-bind-solved/5509>\
**Category:** Help Requests\
**Created:** [August 7, 2024, 2:13pm UTC](https://discourse.aurelia.io/t/radio-unchecks-when-toggling-if-bind-solved/5509 "2024-08-07T14:13:06Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![oskar-anderson](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/oskar-anderson/32/2546_2.png) [@oskar-anderson](https://discourse.aurelia.io/u/oskar-anderson)\
**Post date:** [August 7, 2024, 2:13pm UTC](https://discourse.aurelia.io/t/radio-unchecks-when-toggling-if-bind-solved/5509/1 "2024-08-07T14:13:06Z")

</div>

I need to change app theme. The theme change includes switching UI layout. The problem is that changing the theme unchecks the selected radio input upon being reattached to the DOM. The selected radio value remains unchanged.

Controller:

```auto
export class MyApp {
  private selectedOption = "Strawberry";
  private theme = "blue";

  toggle() {
    this.theme = this.theme === "blue" ? "green" : "blue";
  }
}

```

View:

```auto
<p>
  Current option: ${selectedOption}
</p>

<div if.bind="theme === 'blue'" style="padding: 10px; background: hsl(210, 100%, 90%)">
  <input type="radio" name="radio-options" checked.bind="selectedOption" value.bind="'Watermelon'">Watermelon
  <input type="radio" name="radio-options" checked.bind="selectedOption" value.bind="'Strawberry'">Strawberry
</div>

<div if.bind="theme === 'green'" style="padding: 10px; background: hsl(130, 100%, 90%)">
  <input type="radio" name="radio-options" checked.bind="selectedOption" value.bind="'Watermelon'">Watermelon
  <input type="radio" name="radio-options" checked.bind="selectedOption" value.bind="'Strawberry'">Strawberry
</div>

<button type="button" click.trigger="toggle()">Switch theme</button>

```

I tried adding IDs with unique suffix but that did not help. Any ideas on how to prevent this?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [August 8, 2024, 1:13pm UTC](https://discourse.aurelia.io/t/radio-unchecks-when-toggling-if-bind-solved/5509/2 "2024-08-08T13:13:37Z")

</div>

Is this v1 or v2?  
If it’s v1, can you help create a repro based on [https://gist.dumber.app/](https://gist.dumber.app/)

If it’s v2, can you help create a repro based on [https://stackblitz.com/edit/au2-conventions-tvyh8c](https://stackblitz.com/edit/au2-conventions-tvyh8c)

---

<div class="post-metadata">

**Author:** ![oskar-anderson](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/oskar-anderson/32/2546_2.png) [@oskar-anderson](https://discourse.aurelia.io/u/oskar-anderson)\
**Post date:** [August 8, 2024, 1:40pm UTC](https://discourse.aurelia.io/t/radio-unchecks-when-toggling-if-bind-solved/5509/3 "2024-08-08T13:40:58Z")

</div>

It happens with both. Switching themes 2 or 3 times (depends on starting theme) causes the button to consistently become unchecked.

Here is v2 repro - [Aurelia app - conventions - Vite (forked) - StackBlitz](https://stackblitz.com/edit/au2-conventions-g4edqn?file=src%2Fmy-app.html)

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [August 8, 2024, 2:37pm UTC](https://discourse.aurelia.io/t/radio-unchecks-when-toggling-if-bind-solved/5509/4 "2024-08-08T14:37:41Z")

</div>

Ahh nice find, thanks @oskar-anderson !

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [August 12, 2024, 11:43pm UTC](https://discourse.aurelia.io/t/radio-unchecks-when-toggling-if-bind-solved/5509/5 "2024-08-12T23:43:02Z")

</div>

EDIT:

My original analysis was not correct, it’s not only related to independent if, it’s a combination of independent [if]s + [radio]s that causes the bug.

The fix PR for this is at [fix(radio): handle repeated start/stop correctly by bigopon · Pull Request #2031 · aurelia/aurelia · GitHub](https://github.com/aurelia/aurelia/pull/2031)

Thanks @oskar-anderson

* * *

ORIGINAL:

This is an issue with independent [if]s and browser radio behavior, from my preliminary investigation. You can workaround this either using

`if + else`

```html
<div if.bind="theme === 'blue'">
...
</div>
<div else>
...
</div>

```

or `switch + case`:

```html
<template switch.bind="theme">
  <div case="blue">
  ...
  </div>
  <div case="green">
  ...
  </div>
</template>

```

---

<div class="post-metadata">

**Author:** ![oskar-anderson](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/oskar-anderson/32/2546_2.png) [@oskar-anderson](https://discourse.aurelia.io/u/oskar-anderson)\
**Post date:** [August 13, 2024, 10:58pm UTC](https://discourse.aurelia.io/t/radio-unchecks-when-toggling-if-bind-solved/5509/6 "2024-08-13T22:58:02Z")

</div>

I was just going to ask where I should file a GH issue as I am not sure what projects are maintained and whether they are v1 and v2 (I am on v1). I would have picked templating-binding, but you already merged a fix. Amazing!

Thank you very much @bigopon , if-else is perfect. I would have done a dirty setTimeout hack.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [August 14, 2024, 12:17am UTC](https://discourse.aurelia.io/t/radio-unchecks-when-toggling-if-bind-solved/5509/7 "2024-08-14T00:17:59Z")

</div>

Thank you too for creating the issue.