Checkbox Interruptor em 9 minutos com Javascript e Bootstrap

07/11/2024

Neste tutorial aprenderemos como fazer um checkbox personalizado no estilo de um interruptor. Para isso, utilizaremos o Bootstrap.

Checkbox Interruptor (Switch)

index.html

No html linkaremos o Bootstrap e colocaremos o elemento checkbox.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <div class="form-check form-switch">
        <input class="form-check-input" data-toggle="false" type="checkbox" role="switch" id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">Tema escuro</label>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="javascript.js"></script>
</body>
</html>

javascript.js

No arquivo javascript faremos a troca do fundo, simulando um tema escuro.

(function(win,doc){
    'use strict';

    doc.querySelector('.form-check-input').addEventListener('change',(e)=>{
        if(e.target.dataset.toggle == 'false'){
            doc.querySelector('body').style.background='black';
            e.target.dataset.toggle = 'true';
            doc.querySelector('.form-check-label').innerHTML = 'Tema claro';
            doc.querySelector('.form-check-label').style.color = 'white';
        }else{
            doc.querySelector('body').removeAttribute('style');
            e.target.dataset.toggle = 'false';
            doc.querySelector('.form-check-label').innerHTML = 'Tema escuro';
            doc.querySelector('.form-check-label').style.color = 'black';
        }
    })
})(window,document);

Então é isso, por hoje é só! Fiquem todos com Deus! Sucesso nos códigos e na vida!

Precisa de ajuda na criação de sites? webdesignemfoco@gmail.com

Ninguém vem ao Pai, senão por mim. João 14:6

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Modal Popup em 10 minutos com Javascript e Bootstrap

Neste tutorial aprenderemos como fazer um modal de popup para exibição de mensagens no seu site de maneira bem rápida utilizando o Bootstrap.

Javascript

Ensinaremos durante as aulas a codificaÃ§Ã£o desta importante linguagem de programaÃ§Ã£o.