Tenho um código em que a pessoa seleciona os itens adicionais ao seu pedido por meio do seguinte código:
<div class="form-check">
<input name="dois" class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Chocolate m&m's
</label>
</div>
<div class="form-check">
<input name="dois" class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Oreo
</label>
</div>
<div class="form-check">
<input name="quatro" class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Nutella
</label>
</div>
<div class="form-check">
<input name="quatro" class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Kinder Bueno
</label>
</div>
<h4 class="card-title">Valor Total: <span></span></h4>
<a id="contar" class="btn btn-success">Preço</a>
E ao clicar no botão ele mostra o valor total do pedido, porém queria que mostra-se e atualiza-se o valor automaticamente, sem precisar clicar no botão. Código botão e javascript:
document.querySelectorAll('input[type="checkbox"]:checked').length
document .getElementById("contar").addEventListener("click", function(){
var doisReais = document.querySelectorAll('input[name="dois"][type="checkbox"]:checked').length;
var quatroReais = document.querySelectorAll('input[name="quatro"][type="checkbox"]:checked').length;
var totalAdicionais = (doisReais * 2) + (quatroReais * 4);
var total = 17 + totalAdicionais;
$('h4 span').html("$ " + total + ".00");
});
<h4 class="card-title">Valor Total: <span></span></h4>
<a id="contar" class="btn btn-success">Preço</a>
CÓDIGO COMPLETO EM FUNCIONAMENTO:
document.querySelectorAll('input[type="checkbox"]:checked').length
document .getElementById("contar").addEventListener("click", function(){
var doisReais = document.querySelectorAll('input[name="dois"][type="checkbox"]:checked').length;
var quatroReais = document.querySelectorAll('input[name="quatro"][type="checkbox"]:checked').length;
var totalAdicionais = (doisReais * 2) + (quatroReais * 4);
var total = 17 + totalAdicionais;
$('h4 span').html("$ " + total + ".00");
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div class="form-check">
<input name="dois" class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Chocolate m&m's
</label>
</div>
<div class="form-check">
<input name="dois" class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Oreo
</label>
</div>
<div class="form-check">
<input name="quatro" class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Nutella
</label>
</div>
<div class="form-check">
<input name="quatro" class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Kinder Bueno
</label>
</div>
<h4 class="card-title">Valor Total: <span></span></h4>
<a id="contar" class="btn btn-success">Preço</a>