JSFiddle - React, Tailwind, and code Playground
HTML
<table id="tabela">
<tfoot>
<tr>
<td colspan="2"></td>
<td align="right">Total: <span id="total" class="total"></span> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<input type="checkbox" value="16" class="price" id="chk1"> item A (16)</td>
<td id="e1">
<select value="" class="qty" name="qty">
<option value="1">1 unidade</option>
<option value="2">2 unidades</option>
<option value="3">3 unidades</option>
<option value="4">4 unidades</option>
</select>
<span id="amount" class="amount">0</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="45" class="price" id="chk2"> item B (45)</td>
<td id="e2">
<select value="" class="qty" name="qty">
<option value="1">1 unidade</option>
<option value="2">2 unidades</option>
<option value="3">3 unidades</option>
<option value="4">4 unidades</option>
</select>
<span id="amount" class="amount">0</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="61" class="price" id="chk3"> item C (61)</td>
<td id="e3">
<select value="" class="qty" name="qty">
<option value="1">1 unidade</option>
<option value="2">2 unidades</option>
<option value="3">3 unidades</option>
<option value="4">4 unidades</option>
</select>
<span id="amount" class="amount">0</span>
</td>
</tr>
</tbody>
</table>
CSS
select {
display: none;
}
JavaScript
$(document).ready(function() {
update_amounts();
$('.qty, .price').change(update_amounts);
});
function update_amounts() {
var sum = 0;
$('select').hide();
$('table input').each(function() {
var tr = $(this).closest('tr');
var select = tr.find('.qty').toggle(this.checked);
var qty = select.val();
if (!this.checked) select.prop('selectedIndex', 0);
var price = this.checked ? this.value : 0;
var amount = (qty * price) || 0;
sum += amount;
tr.find('.amount').text(amount);
});
$('.total').text(sum);
}