CheckBox JavaScript 驗證教學與範例

請選購你要的貨品及數量,再按計算總額按鈕

物品A 每個 $12.00 數量:
物品B 每瓶 $25.00 數量:
物品C 每支 $18.00 數量:
物品D 每套 $50.00 數量:

下列是 JavaScript 程式的內容:
<HEAD>
<script type="text/javascript" language="JavaScript">
function checkIt()
{ 
  for (i=0;  i <=(document.fm.item.length-1);  i++ )
  { if(document.fm.item[i].checked && document.fm.quan[i].value<=0)
   { alert("你選了 " +document.fm.item[i].value+ ",請填上數量。")
	 return }
  }


 buyItem=""			//這是選購物品的名稱及數量。
 totalSum=0			//這是選購的總金額。
		//以下部份將選購物品的名稱、數量及總金額記在兩個變數內。
 for (i=0;  i <=(document.fm.item.length-1);  i++ )
	{  if(document.fm.item[i].checked)
		{	buyItem += (document.fm.item[i].value + ",數量= " + 
				document.fm.quan[i].value + " 。
" ) totalSum += (document.fm.price[i].value * document.fm.quan[i].value) } } if (totalSum==0) { alert("你沒有選購任何貨品。") ; return } msgWin=window.open("sendbuy.htm","win2","width=400,height=300") msgWin.moveTo(120,90) } </script> </HEAD> <BODY> <form name=fm method=post action="#"> <p> <table border=1 cellspacing=0 width=60%> <tr> <td with=50%> <input type=checkbox name=item value="物品A"> 物品A </td> <td with=25%> 每個 $12.00 <input type=hidden name=price value=12> </td> <td width=25%> 數量:<input type=text name=quan size=3> </td> </tr> <tr> <td> <input type=checkbox name=item value="物品B"> 物品B </td> <td> 每瓶 $25.00 <input type=hidden name=price value=25 > </td> <td> 數量:<input type=text name=quan size=3> </td> </tr> <tr> <td> <input type=checkbox name=item value="物品C"> 物品C </td> <td> 每支 $18.00 <input type=hidden name=price value=18 > </td> <td> 數量:<input type=text name=quan size=3></td> </tr> <tr> <td> <input type=checkbox name=item value="物品D"> 物品D </td> <td> 每套 $50.00 <input type=hidden name=price value=50 > </td> <td> 數量:<input type=text name=quan size=3 ></td> </tr> </table> <p> <input type=button value="計算總額" onClick="checkIt()"> <input type=reset value="清除資料"> </form> </BODY>
本報導資料來源:本資料取自伍新華電腦工作室 - JavaScript - 基礎課程 - 作者: 伍新華
本報導內容或資料,因限人力、時間,非教學會員,不接受任何使用上的教學與指導,敬請見諒。
如果你喜歡這篇辛苦蒐集整理出來的報導資料,歡迎原文轉載註明出處,以示尊重個人智慧財產,謝謝你的合作。
如果你願意於貴站或部落格中介紹本站,歡迎使用複製網頁研習室連結語法,再次感謝你的支持與愛護。

請按瀏覽器的檢視原始碼查看