[英]jQuery get multiple inputs from a form then calculate the total
Hello I'm just learning jQuery, and I'm trying to get multiple inputs from a form then add up the total. 您好,我只是在学习jQuery,并且尝试从表单中获取多个输入,然后将总数相加。 I've got all my events pulling the values except from the dropdown select.
除了从下拉列表中选择之外,我已经获取了所有事件以提取值。 Here is my HTML form:
这是我的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>
I know that there is some missing pics, but I've got all that working. 我知道有一些丢失的照片,但是我已经完成了所有工作。 And here is my jQuery:
这是我的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. 我遇到的问题是,我似乎无法根据用户检查的内容来计算总计,然后在页面上显示总计以及3万美元的基本价格。 Any help would be much appreciated.
任何帮助将非常感激。
Updated your fiddle: 更新了您的小提琴:
Basically added data-cost
to your checkboxes and iterated through checked ones: 基本上将
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();
});
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. 手动
hide
所有元素(简单的CSS display: none
不是一个好主意display: none
就足够了。 Also, that if
chain to get a checked radio-button isn't necessary. 同样,
if
链来获得选中的单选按钮,则也不需要。 And some other small nitpicks. 和其他一些小nitpicks。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.