Tengo un interruptor de palanca como este: 
Y la etiqueta Active proviene de una base de datos. Quiero que este botón se cambie a true si está activo.
Esto es lo que he probado hasta ahora:
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; } } Está funcionando, pero solo cuando interactúo con el botón. Cuando visito la página por primera vez, siempre está desactivada, incluso si el estado es Activo. Tenga en cuenta que puedo tener varios botones y su estado puede variar entre Active e Inactive .
Entonces, ¿cómo debo hacer esto?
Puede configurar la checked inicial en su <input />
simplemente agregue el atributo checked .
por ejemplo,
// if this one is what you want initial checked.. <input checked onclick='toggleStatus(this)' type='checkbox' id='{{ db.id }}' name='{{ db.id }}'> <label for='{{ db.id }}'>{{ db.status }}</label> <input onclick='toggleStatus(this)' type='checkbox' id='{{ db.id }}' name='{{ db.id }}'> <label for='{{ db.id }}'>{{ db.status }}</label>No conozco bien PHP, pero supongo que funcionaría.
// if this one is what you want initial checked.. <input checked='{{ db.textContent === "Active" }}' onclick='toggleStatus(this)' type='checkbox' id='{{ db.id }}' name='{{ db.id }}'> <label for='{{ db.id }}'>{{ db.status }}</label>Lo arreglé verificando si db.status === "Active" primero con una declaración if-else en PHP:
if (db.status === "Active") { return <input checked onClick=toggleStatus(this)'> } else { return <input onClick=toggleStatus(this)'> }