Javascript jQuery从一个表单中获取多个输入，然后计算总数

您好，我正在学习jQuery，我正在尝试从一个表单中获取多个输入，然后将总数相加。我的所有事件都会从下拉菜单中选择值。这是我的HTML表单：

<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>

我遇到的问题是，我似乎无法根据用户检查的内容计算总数，然后在页面上显示总数加上3万美元的底价。非常感谢您的帮助。

更新了您的小提琴：

基本上在复选框中添加了

数据成本

，并对选中的复选框进行迭代：

$('#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();                  

});

---

还对代码进行了一些重构。手动

隐藏所有元素不是一个好主意，简单的css
显示：无
就足够了。此外，不需要通过
if
链来获取选中的单选按钮。和其他一些小细节。
只是一个评论：在向SO发布问题时，最好只发布一个简单的示例。当4行或5行代码足以回答您的问题时，我们不想费力地阅读几十行代码。抱歉，我们只是想确保帮助您的人有足够的代码。这是我的JSFIDLE，如果有帮助的话。小提琴绝对不错！我知道您试图提供足够的信息，但是，例如，在HTML的每个部分中只需几个
，就足以了解问题的要点。有道理？
$('#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();                  

});