Seleção de produtos com quantidade

Criar um objeto jSON para os elementos selecionados.

by Ivan Ferrer

HTML

<input type="checkbox" name="acr[0]" data-id="1" data-valor="2.00" value="Queijo" /><label>Queijo - R$ 2,00</label>
<input type="number" name="quantidade_acr[0]" step="1" value="1" min='1' max="5" /><br/>

<input type="checkbox" data-id="2" data-valor="0.50" name="acr[1]" value="Alho" /><label>Alho - R$ 0,50</label>
<input type="number" name="quantidade_acr[1]" step="1" value="1" min="1" max="5" /><br/>

<input type="checkbox" data-id="3" data-valor="0.50" name="acr[2]" value="Oregano" /><label>Orégano - R$ 0,50</label>
<input type="number" name="quantidade_acr[2]" step="1" value="1" min="1" max="5" /><br/>

<button id="salvar">Salvar</button>
<br>
<div id="dados"></div>
<div id="subtotal"></div>

CSS

input[type="checkbox"] {
  float:left;
}

input[type="number"] {
    
}
label {
 width:128px; 
 display:block;
  float:left;
}

JavaScript

$(document).ready(function(){
    $('#salvar').on('click', function() {
        var list = [], subtotal= 0;
         $('[name*="acr"]:checked').each(function(key) {
          
             var qtde = $('[name*="quantidade_acr['+key+']"]').val();
             var produto = $(this).val();
             var id = $(this).data('id');
             var valor = $(this).data('valor');
             var total = qtde * valor;
            list[key] = {
                          produto: produto,
                          quantidade: qtde ,
                          id: id,
                          valor: valor,
                          total_valor: total
                         };
              subtotal+=parseFloat(valor);           
                 
           });
        if(list.length > 0) {
          $('#dados').html('<br><strong>'+list.length+'</strong> produto(s) selecionado(s):<br><pre>'+JSON.stringify(list, null, '   ') + '</pre>');
           $('#subtotal').html('<b> Subtotal '+subtotal+'</b>');
        } else {
        $('#dados').html('<br>Selecione algum produto.');
        }
    
    });
});