JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td class="acr">
            <input type='checkbox' name='acr[0]' value='{"tipo": "Queijo" , "preco": 2.0}' />Queijo - R&#36;2,00
            <input type='number ' name='quantidade_acr[0] ' value='1 ' min='1 ' max='5 ' />
            <input type='checkbox' name='acr[0]' value='{"tipo": "Alho" , "preco": 2.0}' />Alho - R&#36;4,00
            <input type='number ' name='quantidade_acr[0] ' value='1 ' min='1 ' max='5 ' />
            <br/>
        </td>
    </tr>
</table>

JavaScript

$('input').on('change', function () {

    var dados = $('.acr input[type=checkbox]:checked').map(function (i) {
        var data = JSON.parse(this.value);
        var qtd = this.checked ? parseInt($(this).next('input').val(), 10) : 0;
        var preco = data.preco;
        console.log(this.checked, preco, qtd);
        var toString = {
            tipo: data.tipo,
            preco: data.preco,
            qdt: qtd,
            total: qtd * data.preco
        };
        var obj = {};
        obj['acr_' + i] = encodeURIComponent(JSON.stringify(toString));
        return obj;
    });

    var queryString = dados.map(function () {
        return $.param(this, true)
    }).get().join('&');
    console.log(queryString);
});