Totalling a Checkbox List

by Douglas Ludlow

HTML

<div id="form">
    <div id="check-box-list">
        <table>
            <tr>
                <td>
                    <input id="check-box-1" type="checkbox" value="Thursday, May 9, 2013 - $95" />
                </td><td>
                    <label for="check-box-1">Thursday, May 9, 2013 - $95</label>
                </td>
            </tr><tr>
                <td>
                    <input id="check-box-1" type="checkbox" value="Friday, May 10, 2013 - $95" />
                </td><td>
                    <label for="check-box-1">Friday, May 10, 2013 - $95</label>
                </td>
            </tr><tr>
                <td>
                    <input id="check-box-1" type="checkbox" value="Saturday, May 11, 2013 - $50" />
                </td><td>
                    <label for="check-box-1">Saturday, May 11, 2013 - $50</label>
                </td>
            </tr><tr>
                <td>
                    <input id="check-box-1" type="checkbox" value="Friday-Saturday, May 10-11, 2013 - $125" />
                </td><td>
                    <label for="check-box-1">Friday-Saturday, May 10-11, 2013 - $125</label>
                </td>
            </tr><tr>
                <td>
                    <input id="check-box-1" type="checkbox" value="Thursday-Saturday, May 9-11, 2013 - $195" />
                </td><td>
                    <label for="check-box-1">Thursday-Saturday, May 9-11, 2013 - $195</label>
                </td>
            </tr>
        </table>
    </div>
    <div>
        <input id="fees" type="hidden" value="95,95,50,125,195" />
    </div>
    <div>
        <label for="total">Total:</label> <input id="total" type="text" />
    </div>
</div>

CSS

#total
{
    margin-top: 20px;
}

JavaScript

var $total = $('#total');
var $options = $('#check-box-list input');
var $fees = $('#fees');
var fees = $fees.val().split(',');

$total.attr('readonly', true);

$options.each(function() {
    $(this).click(function() {
        totalFees();
    });
});

function totalFees() {
    var total = 0;
    $options.filter(':checked').each(function() {
        var index = $options.index($(this));
        total += fees[index] * 1;
    });
    $total.val('$' + total);
}