Checkbox Switch para Orçamento no WhatsApp (HTML + JS)

<div class="container-switch">
  <label class="switch">
    <input type="checkbox" value="550">
    <span class="slider"></span>
    <span class="switch-text">Página de Links <span class="switch-value"></span></span>
    <input type="number" min="1" value="1" class="quantity-input" style="display:none" />
  </label>

  <label class="switch">
    <input type="checkbox" value="250">
    <span class="slider"></span>
    <span class="switch-text">Banners Mensais <span class="switch-value"></span></span>
    <input type="number" min="1" value="1" class="quantity-input" style="display:none" />
  </label>

  <label class="switch">
    <input type="checkbox" value="3000">
    <span class="slider"></span>
    <span class="switch-text">Página de Vendas <span class="switch-value"></span></span>
    <input type="number" min="1" value="1" class="quantity-input" style="display:none" />
  </label>

  <label class="switch">
    <input type="checkbox" value="1590">
    <span class="slider"></span>
    <span class="switch-text">Página de Captura <span class="switch-value"></span></span>
    <input type="number" min="1" value="1" class="quantity-input" style="display:none" />
  </label>

  <label class="switch">
    <input type="checkbox" value="400">
    <span class="slider"></span>
    <span class="switch-text">Paginas Adicionais <span class="switch-value"></span></span>
    <input type="number" min="1" value="1" class="quantity-input" style="display:none" />
  </label>

  <label class="switch">
    <input type="checkbox" value="650">
    <span class="slider"></span>
    <span class="switch-text">Suporte Mensal <span class="switch-value"></span></span>
    <input type="number" min="1" value="1" class="quantity-input" style="display:none" />
  </label>
</div>

<br>
<div id="whatsapp-button">
  <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="whatsapp" style="fill: #fff"><path d="M16.7,3.3c-1.8-1.8-4.1-2.8-6.7-2.8c-5.2,0-9.4,4.2-9.4,9.4c0,1.7,0.4,3.3,1.3,4.7l-1.3,4.9l5-1.3c1.4,0.8,2.9,1.2,4.5,1.2 l0,0l0,0c5.2,0,9.4-4.2,9.4-9.4C19.5,7.4,18.5,5,16.7,3.3 M10.1,17.7L10.1,17.7c-1.4,0-2.8-0.4-4-1.1l-0.3-0.2l-3,0.8l0.8-2.9 l-0.2-0.3c-0.8-1.2-1.2-2.7-1.2-4.2c0-4.3,3.5-7.8,7.8-7.8c2.1,0,4.1,0.8,5.5,2.3c1.5,1.5,2.3,3.4,2.3,5.5 C17.9,14.2,14.4,17.7,10.1,17.7 M14.4,11.9c-0.2-0.1-1.4-0.7-1.6-0.8c-0.2-0.1-0.4-0.1-0.5,0.1c-0.2,0.2-0.6,0.8-0.8,0.9 c-0.1,0.2-0.3,0.2-0.5,0.1c-0.2-0.1-1-0.4-1.9-1.2c-0.7-0.6-1.2-1.4-1.3-1.6c-0.1-0.2,0-0.4,0.1-0.5C8,8.8,8.1,8.7,8.2,8.5 c0.1-0.1,0.2-0.2,0.2-0.4c0.1-0.2,0-0.3,0-0.4C8.4,7.6,7.9,6.5,7.7,6C7.5,5.5,7.3,5.6,7.2,5.6c-0.1,0-0.3,0-0.4,0 c-0.2,0-0.4,0.1-0.6,0.3c-0.2,0.2-0.8,0.8-0.8,2c0,1.2,0.8,2.3,1,2.4c0.1,0.2,1.7,2.5,4,3.5c0.6,0.2,1,0.4,1.3,0.5 c0.6,0.2,1.1,0.2,1.5,0.1c0.5-0.1,1.4-0.6,1.6-1.1c0.2-0.5,0.2-1,0.1-1.1C14.8,12.1,14.6,12,14.4,11.9"></path></svg>
  <div>Enviar pedido <span id="valor-total">R$0,00</span></div>
</div>

<script>
  let total = 0;
  let selectedServices = [];
  const services = {};

  document.querySelectorAll('.switch').forEach((element, index) => {
    const phoneNumber = "5511900009999"; // Número de telefone
    const input = element.querySelector('input');
    const value = Number(input.value);
    const serviceName = element.querySelector('.switch-text').textContent;

    const switchValueElement = element.querySelector('.switch-value');
    switchValueElement.textContent = new Intl.NumberFormat("pt-BR", {
      style: "currency",
      currency: "BRL"
    }).format(value);

    services[`#servico${index + 1}`] = serviceName;

    function calculateTotal() {
      total = 0;
      selectedServices = [];

      document.querySelectorAll('.switch').forEach((element, index) => {
        const input = element.querySelector('input');
        const value = Number(input.value);
        const serviceName = element.querySelector('.switch-text').textContent;
        const quantity = Number(element.querySelector('.quantity-input').value);

        if (input.checked) {
          total += value * quantity;
          selectedServices.push(`${serviceName} (Quantidade: ${quantity})`);
        }
      });

      const valueFormatted = new Intl.NumberFormat("pt-BR", {
        style: "currency",
        currency: "BRL"
      }).format(total);

      const encodedMessage = encodeURIComponent("Olá, simulei um orçamento e o valor total foi " + valueFormatted + ". Os serviços solicitados foram: " + selectedServices.join(", "));

      const whatsappURL = `https://wa.me/${phoneNumber}?text=${encodedMessage}`;
      whatsappButton.setAttribute("onclick", `location.href='${whatsappURL}'`);

      totalText.innerHTML = valueFormatted;

      if (total === 0) {
        whatsappButton.removeAttribute("onclick");
        whatsappButton.classList.remove("button-active");
      } else {
        whatsappButton.classList.add("button-active");
      }
    }

    const quantityInput = element.querySelector('.quantity-input');
    input.addEventListener("change", calculateTotal);
    quantityInput.addEventListener("change", calculateTotal);

    function toggleQuantityField() {
      const quantityContainer = element.querySelector('.quantity-input');
      quantityContainer.style.display = input.checked ? 'block' : 'none';
    }
  
    input.addEventListener("change", toggleQuantityField);
  });

  const totalText = document.querySelector("#valor-total");
  const whatsappButton = document.querySelector("#whatsapp-button");
</script>



<style>
.switch {
 --button-width: 3.5em;
 --button-height: 2em;
 --toggle-diameter: 1.5em;
 --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
 --toggle-shadow-offset: 10px;
 --toggle-wider: 3em;
 --color-grey: #cccccc;
 --color-green: #4296f4;
  display: flex;
  align-items: center;
  gap: 16px;
}

.slider {
 display: inline-block;
 width: var(--button-width);
 height: var(--button-height);
 background-color: var(--color-grey);
 border-radius: calc(var(--button-height) / 2);
 position: relative;
 transition: 0.3s all ease-in-out;
}

.slider::after {
 content: "";
 display: inline-block;
 width: var(--toggle-diameter);
 height: var(--toggle-diameter);
 background-color: #fff;
 border-radius: calc(var(--toggle-diameter) / 2);
 position: absolute;
 top: var(--button-toggle-offset);
 transform: translateX(var(--button-toggle-offset));
 box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
 transition: 0.3s all ease-in-out;
}

span.switch-text {
  font-size: 18px;
}

.container-switch {
    display: flex;
    gap: 16px;
    flex-direction: column;
}

.switch input[type="checkbox"]:checked + .slider {
 background-color: #0001ff;
}

.switch input[type="checkbox"]:checked + .slider::after {
 transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
 box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch input[type="checkbox"] {
 display: none;
}

.switch input[type="checkbox"]:active + .slider::after {
 width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active + .slider::after {
 transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}
</style>




<!-- CSS Opcional -->
<style>
body, html {
    font-family: arial;
}
  
#whatsapp-button {
  background: #cacaca;
  padding: 16px 24px;
  color: #ffffff;
  display: flex;
  gap: 16px;
  align-items: center;
  border-radius: 8px;
  justify-content: center;
  width: fit-content;
  cursor: pointer;
  transition: all linear .3s;
}

#whatsapp-button.button-active {
    background: #02b866;
}

input.quantity-input {
    padding: 6px 8px;
    width: 60px;
    border-radius: 8px;
    border: 1px solid #ccc;
}
</style>