复选框/单选按钮-添加所选项目的总价
Checkboxes/Radio Buttons- Adding price total of chosen item
我目前正在使用单选按钮和复选框。在这个示例项目中,我有单选按钮和复选框,根据用户选择的值显示图像。
如何为所选的每个项目添加一个有价值的价格,并在底部显示总成本?示例
下面的js显示了我根据所选值显示图像的过程。
JS
<script>
function check_value(currentElement, val, id, type) {
var el = document.getElementById("imgBox" + id);
if (val > 0 && val < 4) { //will trigger when [1,2,3]
if(currentElement.checked)
{
el.src = "images/" + type + val + ".jpg";
el.style.display = "";
}
else
{
el.src = "";
el.style.display = "none";
}
}
}
</script>
HTML
<h2>Choose a bike</h2>
<form name="builder">
<input type="radio" name="field" onclick='check_value(this, 1, 1, "bike")'/> KAWASAKI KX 450F- $8,399<br />
<input type="radio" name="field" onclick='check_value(this, 2, 1, "bike")'/> 2010 Yamaha Road Star S- $13,090<br />
<input type="radio" name="field" onclick='check_value(this, 3, 1, "bike")'/> Aprilia RSV4- $16,999<br />
</form>
<img id="imgBox1" src="#" style="display:none">
<h2>Choose a tire</h2>
<form name="tire">
<input type="radio" name="field" onclick='check_value(this, 1, 2, "tire")'/> Michelin Pilot Road 3 Tires- $299.99<br />
<input type="radio" name="field" onclick='check_value(this, 2, 2, "tire")'/> Dunlop Roadsmart Sport-Touring Tires- $154.99<br />
<input type="radio" name="field" onclick='check_value(this, 3, 2, "tire")'/> Pirelli Scorpion Trail Tires- $119.99<br />
</form>
<img id="imgBox2" src="#" style="display:none">
<h2>Choose Accesories</h2>
<form name="tire">
<input type="checkbox" name="field" onclick='check_value(this, 1, "3a", "accessories")'/> Chrome Front Plate- $246.50<br />
<input type="checkbox" name="field" onclick='check_value(this, 2, "3b", "accessories")'/> Jacket- $87.99<br />
<input type="checkbox" name="field" onclick='check_value(this, 3, "3c", "accessories")'/> Gloves- $35.99
</form>
<div id="accessories">
<img id="imgBox3a" src="#" style="display:none">
<img id="imgBox3b" src="#" style="display:none">
<img id="imgBox3c" src="#" style="display:none">
</div>
我会开始
- 删除不必要的formTags并将其减少到一个
- 更改输入名称(例如:收音机的"cylces"answers"tire"以及"frontPlate",请参阅下面的代码)
- 更正函数(reduce params)并将price设置为输入字段的值属性
- 将
for-loop
添加到计算当前总计
我们来了。。。
<head>
<title></title>
<script>
function check_value(curElem, id) {
var el = document.getElementById("img" + curElem.name);
el.src = "images/" + curElem.name + id + ".jpg";
if (!curElem.checked)
el.style.display = "none";
else
el.style.display = "block";
// calculate Total
var total = 0;
var controls = document.getElementsByTagName('input');
for (var i = 0; i < controls.length; i++) {
if ((controls[i].type === 'radio' || controls[i].type === 'checkbox') && controls[i].checked)
total = total + parseFloat(controls[i].value);
}
document.getElementById("total").innerHTML = total;
//alert("Total: " + total);
}
</script>
</head>
<body>
<form name="builder">
<h2>
Choose a bike</h2>
<input type="radio" name="Bike" value="8399" onclick='check_value(this, 1)' />
KAWASAKI KX 450F- $8,399<br />
<input type="radio" name="Bike" value="13090" onclick='check_value(this, 2)' />
2010 Yamaha Road Star S- $13,090<br />
<input type="radio" name="Bike" value="16999" onclick='check_value(this, 3)' />
Aprilia RSV4- $16,999<br />
<img id="imgBike" src="#" style="display: none" />
<h2>
Choose a tire</h2>
<input type="radio" name="Tire" value="299.99" onclick='check_value(this, 1)' />
Michelin Pilot Road 3 Tires- $299.99<br />
<input type="radio" name="Tire" value="154.99" onclick='check_value(this, 2)' />
Dunlop Roadsmart Sport-Touring Tires- $154.99<br />
<input type="radio" name="Tire" value="119.99" onclick='check_value(this, 3)' />
Pirelli Scorpion Trail Tires- $119.99<br />
<img id="imgTire" src="#" style="display: none" />
<h2>
Choose Accesories</h2>
<input type="checkbox" name="FrontPlate" value="246.50" onclick='check_value(this, "")' />
Chrome Front Plate- $246.50<br />
<input type="checkbox" name="Jacket" value="87.90" onclick='check_value(this, "")' />
Jacket- $87.99<br />
<input type="checkbox" name="Gloves" value="35.99" onclick='check_value(this, "")' />
Gloves- $35.99
<div id="accessories">
<img id="imgFrontPlate" src="#" style="display: none" />
<img id="imgJacket" src="#" style="display: none" />
<img id="imgGloves" src="#" style="display: none" />
</div>
<div id="total"></div>
</form>
</body>
尽管这个可能是你答案的解决方案-我看不到这个代码的使用。在现实生活环境中,大部分数据将来自服务器生成的,因此您必须完全重新执行此代码!
相关文章:
- 在BootStrap菜单栏中为所选项目设置背景,类似于BootStrap中的父导航选项
- jQuery:根据select选项中的每页项目进行分页
- 更新:仅根据单选按钮和所选选项选择特定项目
- HTML选择,在DOM中选择了正确的选项,但在firefox中显示了错误的项目
- 如何在angular js中的select选项中获取所选项目id
- 如何将一个表单中的项目添加到 Rails 中另一个表单的下拉选项
- 当表单控件选项具有多个参数时,如何在组合框中填充所选项目
- 通过单击按钮将选项卡(项目)添加到选项卡面板,扩展
- 如何将此选项添加到此图像选取器项目中
- 更新“项目”选项以进行排序
- 在呈现项目后,挖空选择绑定回调的选项
- 在单击选项卡式项目时隐藏和创建另一个对象 - HTML CSS
- 使用表排序器筛选所选选项列表中的选定项目
- jQuery 在选项列表中重新填充所选项目
- 将项目插入活动选项卡窗格
- Microsoft Dynamics Online:将所有选项集项目复制到多行文本字段(使用 JavaScript)
- 在选择选项中选择多个项目,而不使用“Ctrl”键
- jQuery Mobile,在选项列表中选择所有项目
- 从下拉列表中选择项目后,显示新选项并显示文本
- 如何使用jquery将多选下拉列表的所有项目(选项)转换为数组