Подсчет значений по выбору чекбокса

by Alexey Demin

HTML

<div style="height:100px;background-color:#fff;"></div>

<div>
<table>
    <thead>
      <tr><th colspan="3">Выберите товар</th></tr>
    </thead>
    <tbody>
        <tr><td>Минеральная вода "Ессентуки" 1,5л</td>
            <td>1,00</td>
            <td><input type="checkbox" name="essentuki1.5" value="1.00" /></td></tr>
        <tr><td>Апельсиновый сок "Моя семья" 1л</td>
            <td>1,75</td>
            <td><input type="checkbox" name="OrangeJuice1" value="1.75" /></td></tr>
        <tr><td>Pepsi 0,5л</td>
            <td>0,90</td>
            <td><input type="checkbox" name="pepsi0.5" value="0.90" /></td></tr>
        <tr><td>Pepsi 1л</td>
            <td>1,50</td>
            <td><input type="checkbox" name="pepsi1" value="1.50" /></td></tr>
        <tr><td>Pepsi 1,5л</td>
            <td>2,10</td>
            <td><input type="checkbox" name="pepsi1.5" value="2.10" /></td></tr>
        <tr><td>Квас 25л</td>
            <td>10,50</td>
            <td><input type="checkbox" name="kvas25" value="10.50" /></td></tr>
        <tr><th>ИТОГО:</th><th>0 поз.</th><th>0.00 руб.</th></tr>
    </tbody>
</table>
</div>

CSS

body {
 background-image: url(http://subtlepatterns.com/patterns/leather_1.png);
}
div {
 background-color: rgba(0,0,0,0.2);
 color: #333;
 border-radius: 4px;
 border-top: 1px solid #aaa;
 border-left: 1px solid #aaa;
 border-right: 1px solid #777;
 border-bottom: 1px solid #777;
 box-shadow: 8px 8px 16px rgba(0,0,0,0.3);
 width: 400px;
 min-width: 400px;
 padding: 5px 10px 10px 15px;
 margin: 20px;
 font-family: Arial, sans-serif;
 cursor: default;
}

table { width: 400px; }
table thead { cursor: move; }
table th { font-weight: bold; font-size: 16px; }
table tr:first-child th { padding-bottom: 10px; text-decoration: underline; }
table tr:last-child th { padding-top: 10px; }
table td:last-child, table th:last-child { width: 100px; }
table td { font-size: 14px; }

JavaScript

$(function(){
    $("div")
      .draggable({handle:"thead"})
      .disableSelection();
    
    $("input:checkbox").on("change", function(){
        
        var summ = 0;
        
        $.each($("input:checkbox:checked"), function(idx, itm){
          summ += parseFloat(itm.value);
        });
        
        $("div table tr:last th:eq(1)")
          .text($("input:checkbox:checked").length+" поз.")
          .next()
          .text(summ.toFixed(2)+" руб.");
    });
});