购买物品的累加计算，选中即开始加减，非常方便

最新推荐文章于 2023-06-18 17:26:18 发布

hbuzhang

最新推荐文章于 2023-06-18 17:26:18 发布

阅读量1.3k

点赞数

分类专栏： Jsp学习文档文章标签： scripting function input properties object javascript

本文链接：https://blog.youkuaiyun.com/hbuzhang/article/details/276961

版权

Jsp学习文档专栏收录该内容

26 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript来实现动态累加计算功能，用户选中项目即可立即进行加减运算，大大提升了购物结算的便利性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设为首页
加入收藏
联系我们

JS实例特效: 购买物品的累加计算，选中即开始加减，非常方便

演示区：
<script language=JavaScript> // End --> </script>

脚本说明：

将下面的代码加在<head></head>之间

将下面的代码加在<body></body>之间

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
	<!-- begin cloaking from non-JavaScript browsers.

// TITLE: Order Form with Checkbox Item Selection
	// An order form which utilizes checkboxes for making a selection. This method only allows
	//   one quantity of any item to be ordered.
	// Script updates the order total as the visitor checks and unchecks the selections.
	// Also note that the order total can not be manually altered by the visitor.

// Custom scripting by Paul DeBrino of Infinity Research and Development, Inc.
	// We also have a netscrape version for purchase, which works with both NS and IE.
	// For other scripts, or to place an order for customized scripts such as
	//   on-line form scripting, please contact the owner via Email at: info @ infinity-rd.com
	// If you wish to use this script, kindly keep these comments and (C)opyright within the
	//   source code.  Permission granted for http://javascript.internet.com to publish this script.

//Define global form total:
	var form_total=0;

//Define function to manipulate the form total per item selected/deselected:
	function CheckChoice(whichbox)
		{

//This code will dump all Document Object Model properties for the active checkbox:
		//Remove the "//" marks *after* "start of commented section ...
		//  up to but *not* including "end of commented section" to make this work.
		//START OF COMMENTED SECTION:
			//for (xx in whichbox)
			//	{
			//	document.write(xx);
			//	document.write(' = ');
			//	document.write(eval('whichbox.'+xx));
			//		//UNCOMMENT THE FOLLOWING LINES IF YOU ALSO WANT TO DUMP THE CHILD OBJECTS:
			//		//if (eval('whichbox.'+xx)=='[object]')
			//		//{ document.write('**Begin child: ');
			//		//  for (zz in eval('whichbox.'+xx))
			//		//  { document.write(zz);
			//		//    document.write(' = ');
			//		//    document.write(eval('whichbox.'+xx+zz));
			//		//    document.write(', ');
			//		//  }
  			//		//  document.write(':End child**');
			//		//}
			//	document.write('<br>');
			//	}
			// END OF COMMENTED SECTION.

//If box was checked, accumulate the checkbox value as the form total,
		//Otherwise, reduce the form total by the checkbox value:
		if (whichbox.checked == false)
			{ form_total -= eval(whichbox.value); }
		else 	{ form_total += eval(whichbox.value); }

//Re-set displayed total on form:
		document.myform.total.value = '$'+eval(form_total);

}

//Define function to init the form on reload:
	function InitForm()
		{
		//Reset the displayed total on form:
		document.myform.total.value='$0';

//Set all checkboxes on form to unchecked:
		for (xx=0; xx < document.myform.elements.length; xx++)
		   {
		   if (document.myform.elements[xx].type == 'checkbox')
			{
			document.myform.elements[xx].checked = false;
			}
		   }
		}

// end cloaking -->
//  End -->
</script>
<form method="POST" name="myform">
	<font face=Arial>
	商品一 $15.25
		<input type="checkbox" name="Steak" value=15.25 οnclick="CheckChoice(this);">
	商品二 $12.39
		<input type="checkbox" name="Chicken" value=12.39 οnclick="CheckChoice(this);">
	商品三 $18.75
		<input type="checkbox" name="Sushi" value=18.75 οnclick="CheckChoice(this);">
	<br><br>
	<font>
	花费总计: <input type="text" name="total" readonly onFocus="this.blur();">
	</font>
	</font>
</form>

将下面的代码加在<body>里(例<body **加代码处**>)