jQuery get multiple inputs from a form then calculate the total

Question

Hello I'm just learning jQuery, and I'm trying to get multiple inputs from a form then add up the total. I've got all my events pulling the values except from the dropdown select. Here is my HTML form:

<div id="main">         
<p>Please use the car configuration below to price your new vehicle!</p>
        <h2>Please select a color:</h2>
        <input type="radio" name="color" value="purple" id="purple" />
        <label for="color">Bruised Purple</label>
        <input type="radio" name="color" value="blue" id="blue" />
        <label for="color">Pond Water Blue ($200 extra)</label>
        <input type="radio" name="color" value="orange" id="orange" />
        <label for="color">Tangerine Orange</label>
        <input type="radio" name="color" value="green" id="green" />
        <label for="color">Algai Green</label>
        <div id="car-image-holder">
            <h2>Preview image</h2>
            <!--<img id="car-image" src="" alt="Image of a car!" />-->
        </div>
        <div id="select-image">
            <h2>Please select an engine type:</h2>
            <p>Your car comes with a 1.1 Leter 3 Cylinder Engine!</p>
            <select id="engine">
                <option value="0" checked="checked">Select Engine</option>
                <option value="1">3 Cylinder, 1.1 Liter (Included)</option>
                <option value="2500">4 Cylinder, 2.0 Liter (+ $2,500)</option>
                <option value="5000">6 Cylinder, 2.5 Liter Turbo (+ $5,000)</option>
            </select>               
        </div>
        <div id="select-options">
            <h2>Please select some options:</h2>
            <p>Your car comes with a cutting-edge AM radio!</p>
            <input type="checkbox" name="options" id="radio" value="radio" />AM/FM Radio (+ $200)<br />
            <input type="checkbox" name="options" id="cd" value="cd" />CD Player (+ $100)<br />
            <input type="checkbox" name="options" id="wipers" value="wipers" />Intermittent Wipers (+ $50)<br />
            <input type="checkbox" name="options" id="tow" value="tow" />Tow Package (+ $350)<br />
            <input type="checkbox" name="options" id="GPS" value="GPS" />GPS (+ $200)<br />
            <a href="#" id="calculate-total">Calulate Total</a>
        </div>          
    </div>
    <div id="cost">
        <p>Congratulations, your new car will cost:</p>
        <img id="car-image-2" src="" alt="Image of a car!" />
        <div id="cost-container">

        </div> 
    </div>

I know that there is some missing pics, but I've got all that working. And here is my jQuery:

$(document).ready(function() {
$('#select-image').hide();  
$('#engine').hide();    
$('#select-options').hide();
$('#select-gps-maps').hide();
$('#car-image-holder').hide();
$('#cost').hide();
$('#main').change(function() {
    if ($('#purple').is(':checked')) {
        $('body').css('background-image', 'url("Images/car_purple.png")');
    }
    if ($('#blue').is(':checked')) {
        $('body').css('background-image', 'url("Images/car_blue.png")');
    }
    if ($('#orange').is(':checked')) {
        $('body').css('background-image', 'url("Images/car_orange.png")');
    }
    if ($('#green').is(':checked')) {
        $('body').css('background-image', 'url("Images/car_green.png")');
    }
});

$( '#main' ).click(function() {
    $( "#select-image" ).slideDown( "slow", function() {
    // Animation complete.
    });
});
$('#car-image-holder').show();
$( "#main" ).click(function() {
    $( "#engine" ).slideDown( "slow", function() {
    // Animation complete.
    });
});
$( '#engine' ).click(function() {
    $( "#select-options" ).slideDown( "slow", function() {
    // Animation complete.
    });
});

$('#calculate-total').click(function() {
    $( '#main input:checked' ).each(function() {
        if ($( this ).attr( 'name' ) == 'color' && $( this ).val() == 'blue'){
            //alert($( this ).val());
        }
        else if ($( this ).attr( 'id' ) == 'radio') {
            //alert($( this ).val());
            //id.value += this.value + 200;
            //alert($( this ).val());
        }
        else if ($( this ).attr( 'id' ) == 'cd') {
            //alert($( this ).val());
            //id.value += this.value + 100;
            //alert($( this ).val());
        }
        else if ($( this ).attr( 'id' ) == 'wipers') {
            //alert($( this ).val());
            //id.value += this.value + 50;
            //alert($( this ).val());
        }
        else if ($( this ).attr( 'id' ) == 'tow') {
            //alert($( this ).val());
            //id.value += this.value + 350;
            //alert($( this ).val());
        }
        else if ($( this ).attr( 'id' ) == 'GPS') {
            //alert($( this ).val());
            //id.value += this.value + 200;
            //alert($( this ).val());
        }
        else if ($( this ).attr( 'id' ) == 'engine' && $( this ).val() == '2500'){
            alert($( this ).val());  
        }          
    });        
}); //end calculate-total   
}); // end ready

The problem I'm running into is I cannot seem to calculate the totals based on what the user checks then display the total on the page plus a base price of $30k. Any help would be much appreciated.

Answer 1

Updated your fiddle:

jsFiddle

Basically added data-cost to your checkboxes and iterated through checked ones:

$('#calculate-total').click(function(e) {
        e.preventDefault();
        var sum = parseInt(document.getElementById("engine").value);
        $("#select-options").find(":checked").each(function(){
            sum += parseInt($(this).data("cost"));
        });
        $("#cost-container").text(sum);
        $("#cost").show();                  

});

And also refactored your code a bit. It's not a good idea to manually hide all your elements, simple css display: none would suffice. Also, that if chain to get a checked radio-button isn't necessary. And some other small nitpicks.