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>
JavaScript
$(document).ready(function() {
$('[id^=e]').hide();
$('input[id^=chk]').change(function(){
var index = $(this).attr('id').replace('chk','');
if($(this).is(':checked'))
$('#e'+index).show();
else
$('#e'+index).hide();
// $('select').prop('selectedIndex', 0); TRAVEI AQUI ;-) //
});
update_amounts();
$('.qty, .price').change(update_amounts);
});
function update_amounts() {
var sum = 0;
$('table input:checked').each(function() {
var tr = $(this).closest('tr');
var qty = tr.find('.qty').val();
var price = $(this).val();
var amount = (qty * price) || 0;
sum += amount;
tr.find('.amount').text(amount);
});
$('.total').text(sum);
}