自动填充选择和复选框以计算价格
Posted
技术标签:
【中文标题】自动填充选择和复选框以计算价格【英文标题】：Autofill select and check box to calculate price 【发布时间】：2013-04-30 13:59:53 【问题描述】：我希望根据为我正在构建的网页选择的选项自动填写表单并计算总数。我是 javascript 新手，在这个网站上找到了以下代码示例，但无法修改它以使其按我的意愿工作。任何帮助，将不胜感激。复选框将计算但不是选择列表。
<html>
<head>
<script type = "text/javascript">
var allprices = [];
var index = 0;
function chkrads(frmName,rbGroupName)
var chosen = "";
var radios = document[frmName].elements[rbGroupName];
for (var i=0; i <radios.length; i++)
if (radios[i].checked)
chosen = radios[i].value;
if (chosen == 0) printprice = 0
if (chosen == 1) printprice = 99
if (chosen == 2) printprice = 150
if (chosen == 3) printprice = 250
if (chosen == 21) printprice = 200
if (chosen == 22) printprice = 300
if (chosen == 30) printprice = 50
if (chosen == 41) printprice = 50
if (chosen == 42) printprice = 70
if (chosen == 43) printprice = 90
if (rbGroupName == "size") index = 0
if (rbGroupName == "colour") index = 1
if (rbGroupName == "frame") index = 2
if (rbGroupName == "glass") index = 3
if (rbGroupName == "hook") index = 4
if (rbGroupName == "delivery") index = 5
allprices[index] = printprice;
var totalprice = 0;
for (var i =0; i <allprices.length; i++)
if (!isNaN(allprices[i]))
totalprice = totalprice + allprices[i];
document.getElementById("result").style.display = "block";
document.getElementById("result").innerHTML = totalprice;
</script>
</head>
<body>
<form name= "myform" style="font-size:11px; font-family:Arial, Helvetica, sans-serif;">
<select name = "size" onchange = "chkrads('myform', 'size')">
<option></option>
<option value = "0">0</option>
<option value = "1">1</option>
</select>
</option><br>
<br /><br /><br /><br />
<input type = "radio" name = "colour" value = "0" onclick = "chkrads('myform', 'colour')"><b>No</b>
<input type = "radio" name = "colour" value = "21" onclick = "chkrads('myform', 'colour')"><b>black</b>
<input type = "radio" name = "colour" value = "22" onclick = "chkrads('myform','colour')"><b>Multi Colour</b>
<br /><br /><br /><br />
<input type = "radio" name = "frame" value = "0" onclick = "chkrads('myform', 'logo')"> <b>No</b>
<input type = "radio" name = "frame" value = "30" onclick = "chkrads('myform', 'logo')"><b>Yes</b>
<br /><br /><br /><br />
<input type = "radio" name = "glass" value = "0" onclick = "chkrads('myform', 'glass')"><b>No</b>
<input type = "radio" name = "glass" value = "51" onclick = "chkrads('myform', 'glass')"><b>Yes</b>
<br /><br /><br /><br />
<input type = "radio" name = "hook" value = "0" onclick = "chkrads('myform', 'hook')"> <b>0</b>
<input type = "radio" name = "hook" value = "41" onclick = "chkrads('myform', 'hook')"> <b>1</b>
<input type = "radio" name = "hook" value = "42" onclick = "chkrads('myform', 'hook')"> <b>2</b>
<input type = "radio" name = "hook" value = "43" onclick = "chkrads('myform', 'hook')"> <b>3</b>
<br /><br /><br /><br />
<input type = "radio" name = "delivery" value = "0" onclick = "chkrads('myform', 'delivery')"><b>No</b>
<input type = "radio" name = "delivery" value = "61" onclick = "chkrads('myform', 'delivery')"><b>Yes</b>
</form>
<div id="result" style="display:none;"><strong></strong> <span id="totalprice"></span> </div>
</body>
</html>
【问题讨论】：
【参考方案1】：所以问题是这样的说法：
if (radios[i].checked)
chosen = radios[i].value;
如果元素是复选框，则仅设置“选择”。
试试这个：
if (radios[i].checked || radios[i].selected)
chosen = radios[i].value;
我设置了一个jsfiddle：
http://jsfiddle.net/ARqQr/3/
顺便说一句，这看起来很容易使用knockoutjs 解决，并且可能会稍微整理一下代码...
【讨论】：
最后一个问题，如果我更改上述代码并为选择列表中的一组不同值添加 selected2，则 javascript 将无法运行。 虽然我给新变量赋值以上是关于自动填充选择和复选框以计算价格的主要内容，如果未能解决你的问题，请参考以下文章