所以我设法将一些JavaScript（在其他人的帮助下）放在一起，这基本上是一种形式，允许您更改项目的数量，并在勾选复选框时将其值添加到总数中（总显示）在底部的文本字段中。
我理解其中的一些，它只是让我感到困惑的更复杂的部分（例如逻辑）。有人可以跟我说说或者评论我的代码的主要部分，这样可以帮助我理解代码是如何工作的。
<script type="text/javascript">
function bump( which, bywhat ) {
var form = document.items;
var qty = form["qty" + which];
qty.value = Number(qty.value) + bywhat;
TotalCheckedValues( ); // in case user bumped an already checked line
}
function TotalCheckedValues( ) {
var form = document.items;
var total = 0;
for ( var n = 1; n <= 4; ++n )
{
if ( form["cb"+n].checked ) // if the checkbox of the item is ticked
{
total += form["cb"+n].value * form["qty"+n].value; //
}
}
form.Total.value = total.toFixed(2);
}
function validate(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
var regex = /[0-9]|\./;
key = String.fromCharCode( key );
if(!regex.test(key)) {
theEvent.returnValue = false;
if (theEvent.preventDefault) {
theEvent.preventDefault();
}
}
}
</script>
</head>
<body>
<form name="items">
Item <input type="text" onkeypress='validate(event)'name="qty1" value="0"/>
<input type="button" onclick="bump(1,1)" value="+"/>
<input type="button" onclick="bump(1,-1)" value="-"/>
<input type="checkbox" name="cb1" value="20.00"
onClick="TotalCheckedValues()" />Service 1 (£20.00) <br />
Item <input type="text" onkeypress='validate(event)' name="qty2" value="0"/>
<input type="button" onclick="bump(2,1)" value="+"/>
<input type="button" onclick="bump(2,-1)" value="-"/>
<input type="checkbox" name="cb2" value="20.00"
onClick="TotalCheckedValues()" />Service 2 (£20.00) <br />
Item <input type="text" onkeypress='validate(event)' name="qty3" value="0"/>
<input type="button" onclick="bump(3,1)" value="+"/>
<input type="button" onclick="bump(3,-1)" value="-"/>
<input type="checkbox" name="cb3" value="20.00"
onClick="TotalCheckedValues()" />Service 3 (£20.00) <br />
Item <input type="text" onkeypress='validate(event)' name="qty4" value="0"/>
<input type="button" onclick="bump(4,1)" value="+"/>
<input type="button" onclick="bump(4,-1)" value="-"/>
<input type="checkbox" name="cb4" value="10.00"
onClick="TotalCheckedValues()" />Service 4 (£10.00) <br />
Total: <input type="text" name="Total" readonly size="5" />
<input type="reset" name="reset" value="Clear Selected">
</form>
</body>
</html>
答案 0 :(得分：1)
首先，我不确定那是你应该学习的那种javascript ...但是，我会尝试给你一些提示
共有3个功能：validate，bump和TotalCheckedValues
Validate最容易理解。请注意每个onkeypress属性中对此函数的调用。调用Validate以验证刚刚按下以键入输入的键是否为0到9（包括）或点之间的数字。 （正则表达式检查）
bump用于记录每个项目上的+和 - 按钮的点击次数（以跟踪数量）。它依赖于对document.items表单的调用，该表单以{1}}的形式按升序命名，并由其名称中的数字标识（第一项为items）。该函数将项目的索引和增加或减少其值的数量作为参数（第3项的+按钮的name="qty1"，这意味着：取第3项并将其值加1）。该函数以调用第3个函数结束
bump(3,1)会重新计算总金额（TotalCheckedValues。此功能会对项目进行反复处理，对这些项目进行迭代，检查是否选中了复选框，如果是，则取价格和数量，将它们相乘并将它们添加到总数中
答案 1 :(得分：0)
// Also going to be cleaning up the code a little - no offense, I'm just anal
// One more note: I'll be specifying types in my function documentation - but remember
// that JS doesn't really *do* types
/**
* Grab a quantity and increase it by a given value
* @param int which Number of the field to target (comes out as 'qty1/2/3/4/etc')
* @param int bywhat Number to increase the value found with 'which' by
*/
function bump(which, bywhat) {
// Find the form child named 'qtyn', where n is a number
// Notice only one var definition here - no need to define form if
// you can just get to your target element/attribute/etc.
var qty = document.items['qty' + which].value;
qty = Number(qty) + bywhat; // Add bywhat to the form value
TotalCheckedValues(); // in case user bumped an already checked line
}
/**
* Iterate through all check boxes (cb) on the form and multiply quantities (qty)
* against values on checked boxes.
*/
function TotalCheckedValues() {
// Some consider it best practice to put all vars in the top of the method,
// in a comma-separated list using one "var" keyword.
var form = document.items,
total = 0,
checkbox = null,
n = 1;
for(n; n <= 4; ++n)
{
checkbox = "cb"+n; // make your code easier to read
if(form[checkbox].checked) // if the checkbox of the item is ticked
{
// If the checkbox is checked, multiply it's value to that of each qty field
total += form[checkbox].value * form["qty"+n].value;
}
}
form.Total.value = total.toFixed(2); // Shorten 'total' to 2 decimal places
}
/**
* Test for a valid key
* @param event evt The key-related event
*/
function validate(evt) {
/*
* In javascript, the OR operator || is used as a way of setting defaults. So,
* keep trying values until one that's considered "true" is found:
* var something = false;
* var foo = null;
* var bar = 'abc';
* var which = something || foo || bar; // value of 'which' is 'abc'
*/
var theEvent = evt || window.event,
key = theEvent.keyCode || theEvent.which,
regex = /[0-9]|\./; // Regex that matches 0-9 and '.'
key = String.fromCharCode( key ); // Convert from key code to something usable
// I almost think you could do...
// var ... key = String.fromCharCode(theEvent.keyCode || theEvent.which)
// but I'm not sure.
// If our key event's code doesn't pass our regex test
if(!regex.test(key)) {
theEvent.returnValue = false;
if(theEvent.preventDefault)
theEvent.preventDefault();
}
}
其他一些建议
我想分享一些其他指示，或许只是一些需要考虑的建议：
依赖于硬编码限制（TotalCheckedValues（）中for循环中的'4'）使您的代码不再可重用。相反，您应该将所有匹配的子节点迭代到父节点。使用jQuery它会像$('#MyFormId input[type="checkbox"]).each(...)这样使代码变得灵活，不需要更新只是因为你添加了另一个复选框。
在表单元素上使用ID可以使选择更加明显 - 依赖于文档[名称]是可以的，但可能无法在任何地方播放。
， bywhat ， evt - 变量名称很棒，因为它们可以是任何东西，所以在决定时请记住这一点什么叫你的变量。描述性名称1）帮助您记住2个月后回到代码时发生的事情，2）帮助其他任何必须通过您的代码，无论出于何种原因，了解正在发生的事情。
一致性是关键：您的函数名称风格混合： bumb vs TotalCheckedValues vs 验证 - 您应该选择一种方式为了你的代码并坚持下去。
如果你真的想要一些能够挑剔你的代码的东西，那么请访问JSLint ...并让你哭泣。但只是阅读“JSLint如何工作？”关于他们如何以及为什么选择代码的某些部分的页面对于学习Javascript和一些最佳实践©for JS来说很有价值。
答案 2 :(得分：0)
注意：我写了大约一半的时间，发现人们已经回答了 - 为任何重复道歉但我想完成我的开始！
<强> 1。 '碰撞'功能
此函数接受两个参数：
var form = document.items;
该函数首先获取全局文档对象中所有项目的数组，您可以从任何地方访问该项目。
var qty = form ['qty'+ which];
然后，此代码尝试访问该数组中的特定项，其名称为“qty”加上 参数。当你在这种情况下使用'+'运算符时，你在一个数字（ ）中添加一个字符串（'qty'），你最终会得到一个字符串;例如'qty3'。
qty.value = Number（qty.value）+ bywhat;
然后设置'qty + where '输入元素的值，取当前值，将其转换为数字，然后将 bywhat 参数添加到它。在这种情况下使用“+”运算符时，如果要为数字添加数字，则执行数学计算;例如1 + 2 = 3。
TotalCheckedValues（）;
然后代码调用TotalCheckedValues函数，该函数似乎计算总数（我们接下来将会这样做）。
<强> 2。 'TotalCheckedValues'功能
此函数在每次'bump'函数调用之后调用，并且每次选中/取消选中复选框时也会调用此函数。
var form = document.items;
该函数再次从数组中获取全局文档对象中的所有项目，您可以从任何位置访问该项目。
var total = 0;
然后该函数定义一个'total'变量，该变量设置为零。
'for'循环
然后代码循环四次，对于HTML中的每个输入/按钮/复选框组循环一次。它尝试获取每个组的checkbox元素，然后检查是否选中了该复选框。如果是，则将复选框值（即价格）乘以文本字段的数量值，并添加到“总计”变量中。这里的'+ ='运算符将其右侧的值添加到现有值，而不是覆盖现有值。
form.Total.value = total.toFixed（2）;
然后，该函数尝试在document.items数组中找到名为“Total”的元素，使用点符号而不是之前看到的括号表示法（例如，form ['qty']）。使用上面for循环生成的总数设置该元素的值。 toFixed（2）函数可用于数字，以返回具有给定小数位数的数字的字符串表示形式 - 在本例中为2。
第3。 '验证'功能
var theEvent = evt || window.event;
创建一个包含已引发的事件对象的变量。它检查传递的 evt 参数中是否有事件对象 - 如果它为null或未定义，则使用window.event事件对象。
var key = theEvent.keyCode || theEvent.which;
尝试确定按下哪个键来触发事件并将其存储在变量中。
var regex = / [0-9] | ./;
定义正则表达式模式，它将匹配0到9的值和点字符。
key = String.fromCharCode（key）;
尝试从密钥中检索字符串，其中......
如果（！regex.test（密钥））
...然后针对正则表达式进行测试。如果test（）函数与模式匹配，则返回true，否则返回false。如果正则表达式匹配失败，则运行此“if”语句中的其余代码;它设置事件的返回值，并取消事件（preventDefault）而不停止将事件传播给其他侦听器。
希望JavaScript函数的演练有所帮助！