JSFiddle - React, Tailwind, and code Playground

HTML

<table width="300" border="1px">
  
  <tr>
    <td width="100" height="10">Contas</td>
    <td width="100">Valor</td>               
  </tr>
    
  <tr>
    <td height="10">Teste01</td>
       
    <td><input type="checkbox" id="1" value="100.20"/>100.20</td>       
  </tr>
  
  <tr>
    <td height="10">Teste02</td>
    
    <td><input type="checkbox" id="2" value="200.20"/>200.20</td>         
  </tr>    
    
  <tr>
    <td height="10">Teste03</td>
    <td><input type="checkbox" id="3" value="300.20"/>300.20</td>         
  </tr>       
    
</table>

<input id='result' type="text" value='0' />
<input id='result2' type="text" value='0' />
<input type="button" value="Selecao" id="somar" />

JavaScript

function sumChecked() {
var result = $("input:checked");
var total = 0;
selecao = [];   
    
for (var i=0;i<result.length;i++)
{
total = total+parseFloat(result[i].value);
selecao.push(result[i].id);    
}
$("#result").val(total.toFixed(2));
$("#result2").val(selecao);    

}

sumChecked();
$(":checkbox").click(sumChecked);

$(document).ready(function() {
  $("#somar").click(function(){
    alert(selecao);           
      
  });
});