I have a toggle switch like this one:
[![enter image description here](https://i.stack.imgur.com/PWcIq.png)](https://i.stack.imgur.com/PWcIq.png)

And the `Active` label is coming from a database. I want this button to be changed to `true` if it's active.

This is what I've tried so far:

**HTML**

```
<input onclick='toggleStatus(this)' type='checkbox' id='{{ db.id }}' name='{{ db.id }}'>
<label id='user-status-toggle' for='{{ db.id }}'>{{ db.status }}</label>

```

**JavaScript**

```
function toggleStatus(radio) {
    var toggle = document.getElementById('user-status-toggle');

    if (radio.checked) {
        toggle.textContent = "Active";
        radio.checked = true;
    } else {
        toggle.textContent = "Inactive";
        radio.checked = false;
    }
}

```

It's working, but only when I interact with the button. When I first visit the page, it's always toggled off, even if the status is Active. Note that I may have multiple buttons and their status may vary between `Active` and `Inactive`.

So how should I do this?