JSFiddle - React, Tailwind, and code Playground

by dave r

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>      
      <th>Articulo</th>
      <th>Costo</th>
    </tr>    
  </thead>
  <tbody>
    <tr>
      <td>
        Memoria
      </td>
      <td class = "suma">
        400
      </td>
    </tr>
    <tr>
      <td>
        CPU
      </td>
      <td class = "suma">
        500
      </td>
    </tr>
    <tr>
      <td>
        MainBoard
      </td>
      <td class = "suma">
        600
      </td>
    </tr>
    <tr>
      <td>
        Fuente de poder
      </td>
      <td class = "suma">
        400
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        Total
      </td>
      <td>
        <label id = "lblTotal"></label>        
      </td>
    </tr>
  </tfoot>
</table>

<br>
<br>
<br>

<table>
  <thead>
    <tr>
      <th>Sel</th>
      <th>Articulo</th>
      <th>Costo</th>
    </tr>    
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        Memoria
      </td>
      <td>
        400
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        CPU
      </td>
      <td>
        500
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        MainBoard
      </td>
      <td>
        600
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        Fuente de poder
      </td>
      <td>
        400
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td>
        Total
      </td>
      <td>
        <label id = "lblTotal2"></label>        
      </td>
    </tr>
  </tfoot>
</table>

JavaScript

$(function(){

	//funcion suma todo

	var sum = 0;
	$('.suma').each(function(x,y){
  	sum += parseInt($(this).text());  	    
  })
  $('#lblTotal').text(sum);  
  
  // funcion suma por check
  
  $( "input:checkbox").change(function(){
  	if($(this).is(':checked')){    	
    	$(this).parent().parent().find('td:last').addClass('suma2');
    }else{    	
    	$(this).parent().parent().find('td:last').removeClass('suma2');
    }  	
    suma2Total();
  })  
  
  function suma2Total(){
  	var sum2 = 0;
    $('.suma2').each(function(x,y){
      sum2 += parseInt($(this).text());  	    
    })
    $('#lblTotal2').text(sum2);
  }    
})