JSFiddle - React, Tailwind, and code Playground
HTML
<table id="tabela">
<tfoot>
<tr>
<td colspan="3"></td>
<td align="right"> <span id="total">Total: <span class="total">0</span></span>
<p><span class="aviso">Some se o item A estiver selecionado</span></p>
<p><span class="aviso">Some se o item B estiver selecionado</span></p>
<p><span class="aviso">Some se o item C estiver selecionado</span></p>
<p>Soma só as unidades(select): <span id="total_unidades"></span></p>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<input type="checkbox" value="16" class="price" id="chk1"> item A (16) X</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) X</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) X</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>
JavaScript
$(document).ready(function() {
update_amounts();
$('.qty, .price').change(update_amounts);
});
function update_amounts() {
var sum2 = 0;
var sum = 0;
$('select').hide();
$('tr').each(function() {
var unidades = $(this).find('option:selected');
var checkbox = $(this).find('.price');
if (checkbox.is(':checked')) {
sum2 += parseInt(unidades.val(), 10);
}
});
$('#total_unidades').text(sum2);
$('table input').each(function(i) {
var tr = $(this).closest('tr');
var select = tr.find('.qty, .amount').toggle(this.checked);
var qty = select.val();
var price = this.checked ? this.value : 0;
var amount = (qty * price) || 0;
if (!this.checked) select.prop('selectedIndex', 0);
sum += amount;
tr.find('.amount').text(amount);
$('table').find('tfoot .aviso').eq(i).toggle(!amount);
});
$('#total').toggle(!!sum);
$('.total').text(sum);
}