0

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>
                    
                     

1 Resposta 1

1

Se eu intendi bem seu problema, sua solução seria apenas alterar a trigger para atualizar o preço, remova a trigger do botão e adicione a trigger no evento de click do checkbox, algo como:

        document.querySelector("input[type='checkbox']").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");
    });

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .