JSFiddle - React, Tailwind, and code Playground

HTML

<label class="checkbox-inline">100$
    <input type="checkbox" name="servico[]" data-valor="100" value="id1">
</label>
<label class="checkbox-inline">200$
    <input type="checkbox" name="servico[]" data-valor="200" value="id2">
</label>


<h2>Total</h2>
<input type="number" name="totalValor" disabled>

JavaScript

$(document).ready(function() {
    $(":checkbox").change(function() {
        var total = $(":checkbox:checked").get().reduce(function(tot, el) {
            return tot + Number(el.dataset.valor);
        }, 0);
        $('[name="totalValor"]').val(total);
    });
});;