Question

您好我刚刚学习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>

我知道有一些缺失的照片，但我已经完成了所有工作。这是我的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

我遇到的问题是我似乎无法根据用户检查的内容计算总数，然后显示页面上的总数加上$ 30k的基本价格。任何帮助将不胜感激。

Answer 1

更新了你的小提琴：

jsFiddle

基本上将data-cost添加到您的复选框并迭代检查了一下：

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

});

并且还重构了一下你的代码。手动hide所有元素并不是一个好主意，简单的css display: none就足够了。此外，没有必要使用if链来获取已检查的单选按钮。还有其他一些小的挑剔。

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

1 个答案: