Update the product price in real time

Question

I have a code where the person selects the additional items to their request via the following code:

<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>

And by clicking on the button it shows the total value of the order, but wanted to show and update the value automatically, without having to click on the button. Code button and 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>

COMPLETE CODE IN OPERATION:

        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>
                    
                     

Answer 1

If I intended your problem well, your solution would just change Trigger to update the price, remove Trigger from the button and add Trigger to the checkbox click event, something like:

        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");
    });