jQuery Scorecard

HTML form with real-time scoring updates updates.

HTML

<form action="add.php" id="scorecard" method="post">
    <div data-role="header" data-position="inline">
        	<h1>Update Score</h1>

    </div>
    <div data-role="content" data-theme="c">
        <ul data-role="listview" class="ui-listview">
            <li data-role="fieldcontain">
                <label for="name">Team:</label>
                <input type="text" name="name" id="name" value="Team Test" data-mini="true" readonly>
            </li>
            <li data-role="fieldcontain">
                <label for="course">Course:</label>
                <input type="text" name="course" id="course" value="Augusta" data-mini="true" readonly>
            </li>
            <li data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                    <legend>Hole 1:</legend>
                    <input name="h01" id="radio-choice-b" value="0" checked="checked" type="radio">
                    <label for="radio-choice-b">0</label>
                    <input name="h01" id="radio-choice-c" value="1" checked="checked" type="radio">
                    <label for="radio-choice-c">1</label>
                    <input name="h01" id="radio-choice-e" value="2" checked="checked" type="radio">
                    <label for="radio-choice-e">2</label>
                    <input name="h01" id="radio-choice-f" value="3" checked="checked" type="radio">
                    <label for="radio-choice-f">3</label>
                    <input name="h01" id="radio-choice-g" value="4" checked="checked" type="radio">
                    <label for="radio-choice-g">4</label>
                    <input name="h01" id="radio-choice-h" value="5" checked="checked" type="radio">
                    <label for="radio-choice-h">5</label>
                </fieldset>
            </li>
            <li data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                 ...

JavaScript

$("#scorecard").change(function() {
    var total = 0;
    $("#scorecard :checked").each(

    function() {
        var valu = parseInt($(this).val());
        if(valu === 0){
          total += 1;
        }
        else{
        total += valu;
        }
    });
    $("#score").val(18-total);
}).change();