Calculating Sum of Checked Checkboxes

var calculator = document.querySelector("form");
function extras() { var extrasPricing = new Array(); extrasPricing["candles"] = 5; extrasPricing["inscription"] = 10; extrasPricing["decoration"] = 25; extrasPricing["special"] = 50;
 var extrasCost = 0; var extras = calculator.elements["extras"];
 for (var i = 0; i < extras.length; i++) {  if (extras[i].checked) {   extrasCost = extrasCost + extrasPricing[extras[i].value];                //Do not break here  } } return extrasCost;}
function calculateTotal() { calculator.total.value = "$" + extras();}

<form><fieldset><legend>Select Extras</legend><label><input type="checkbox" name="extras" value="candles" onclick="calculateTotal()">Candles</label><br><label><input type="checkbox" name="extras" value="inscription" onclick="calculateTotal()">Inscription</label><br><label><input type="checkbox" name="extras" value="decoration" onclick="calculateTotal()">Decoration</label><br><label><input type="checkbox" name="extras" value="special" onclick="calculateTotal()">Special Frosting & Icing</label></fieldset>
<input type="text" name="total" readonly><input type="submit" value="Submit"></form>

Get the Sum of checked checkbox for each row of table

$(this).parents("tr").children("td").find('input[type=checkbox]:checked')

When you tick the checkall checkbox, it will be matched by this selector. It doesn't have an explicit value set, so .val() will return the string "on".

Obviously, the string "on" cannot be converted to an integer, so your total will become NaN.

Exclude the .checkall checkbox from your selector, and your code will work.

$(this).parents('tr').find(':checkbox:checked').not(".checkall").each(...

Updated fiddle

NB: You should also pay attention to the jQuery documentation - $(document).ready(fn) has been deprecated since v3. Use $(fn) instead.

Edit: Based on your updated Fiddle posted on CodeProject, you just need to trigger the change event of your checkbox after you've updated it from the SelectAll function:

table.find('td:nth-child(' + columnIndex + ') input').prop("checked", obj.checked).change();

Fixed updated Fiddle

How get the sum of all the checkbox values of checked items

This one has fixed all the errors you made in your markup, and simplified the code by alot.

const output = document.getElementById('priceSection');

const totalPrice = () => [...document.querySelectorAll('#prices input[type=checkbox]:checked')]
  .reduce((acc, {
    dataset: {
      price
    }
  }) => acc + +price, 0);

document.getElementById('prices').addEventListener('change', () => output.textContent = totalPrice());

<div id="prices">
  <input type="checkbox" data-price="10" />
  <input type="checkbox" data-price="20" />
  <input type="checkbox" data-price="30" />
</div>
<div id="priceSection"></div>

 $('table tbody tr').each(function() 
 {
     //do something
 });

$(document).ready(function() {

function calculateSum(){
 var sumTotal=0;
    $('table tbody tr').each(function() {
      var $tr = $(this);

      if ($tr.find('input[type="checkbox"]').is(':checked')) {
          
        var $columns = $tr.find('td').next('td').next('td');
         
         var $Qnty=parseInt($tr.find('input[type="text"]').val());
 var $Cost=parseInt($columns.next('td').html().split('$')[1]);
         sumTotal+=$Qnty*$Cost;
      }
    });

       $("#price").val(sumTotal);
       
}

  $('#sum').on('click', function() {
     
    calculateSum();
  });

  $("input[type='text']").keyup(function() {
     calculateSum();

  });
  
   $("input[type='checkbox']").change(function() {
     calculateSum();

  });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sum" type="button">Calculate</button><br/>

<table>
  <tr style="background-color: silver;">
    <th>Check it</th>
    <th>Estimate item</th>
    <th>Quantity</th>
    <th>Cost</th>
  </tr>
  <tr>
    <td><input type="checkbox" name="chck" value="450" /></td>
    <td>Remove Tile</td>
    <td><input type="text" name="qnty" value="1"></td>
    <td>$450</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="chck" value="550" /></td>
    <td>Remove Tub</td>
    <td><input type="text" name="qnty" value="1"></td>
    <td>$550</td>
  </tr>
  </table>
  
  <p>Calculated Price: $<input type="text" name="price" id="price" disabled /></p>

function calculate() {
  const ele = document.getElementsByTagName('input');
  let table = document.getElementById("myTable");
  let tr = table.getElementsByTagName("tr");
  let subTotal = 0;
  for (var i = 0; i < ele.length; i++) {
    let td = tr[i].getElementsByTagName("td")[1];
    let price = parseFloat(td.innerText); // change here
    if (ele[i].type == 'checkbox' && ele[i].checked == true)
      subTotal += price;
  }
  document.getElementById("val").innerHTML = "The subtotal is " + subTotal.toFixed(2); // and set precision here
}

<!DOCTYPE html>
<html>

<body>

  <table id="myTable">
    <tr>
      <td>T-Shirt</td>
      <td>9.99</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td>Pants</td>
      <td>49.99</td>
      <td><input type="checkbox"></td>
    </tr>
  </table>
  <span id="val">The subtotal is: </span>
  <button onclick="calculate()">Calculate subtotal</button>

</html>

 $('.table-grid2 input').change(function(){
     var total = 0;
     $('.table-grid2 input').each(function() {
         if (this.checked)
         {
              total += parseInt(this.value);
         }
     });
     $('#total').html(total);
 });