常用於頁面交互的JavaScript的一些技巧分析

JavaScript是用於頁面交互的一種技術，它能控制頁面元素並進行操作。下面接單的介紹checkbox的一些常用。

我們以下圖爲例：

 

  用戶可以對其中的記錄進行修改和刪除，但是修改只能選中一條記錄，而刪除則可以對多條記錄進行。這就要用到javaScript頁面交互。

  以響應修改事件函數爲例，代碼如下:

  function modify () { //遍歷所有的checkbox選項 var a = document.getElementsByName("selectFlag"); var flag = 0; var index = 0; for(var i=0;i<a.length;i++){ if(a[i].checked==true){ flag++; index=i; if(flag==2) break; } } //根據遍歷以後的標識符來判斷是否有要修改的 if(flag==0){ alert("請選擇要修改的物料!"); return; } if(flag>=2){ alert("每次修改只能選擇一個物料!"); return; } with(document.getElementById("itemForm")){ method="post"; action=”item_modify.jsp”; submit(); } }

1. 對於頁面中物料代碼前面的checkbox代碼如下：<input type="checkbox" name="selectFlag" class="checkbox1">

2. 其中的’全選’按鈕的響應事件代碼如下：

//checkbox‘全選’與‘全不選’函數
	function checkAll() {
		var checkBoxs = document.getElementsByName("selectFlag");
		for(var i = 0;i<checkBoxs.length;i++){
			checkBoxs[i].checked=document.getElementById("ifAll").checked;
		}

下面是’刪除’事件的響應代碼：

function delete () {
		//遍歷所有的checkbox選項
		var a = document.getElementsByName("selectFlag");
		var flag = false;
		for(var i=0;i<a.length;i++){
			if(a[i].checked==true){
				flag = true;
				break;
			}
		}
		//根據遍歷以後的標識符來判斷是否有要刪除的
		if(flag==false){
			alert("請選擇要刪除的物料!");
			return;
		}
		//提示用戶是否要確認刪除
		if(window.confirm("確認要刪除選中的物料?")){
			with(document.getElementById("ItemForm")){
				method="post";
				action="item_delete.jsp";
				submit();
			}
		}
	}

  這就是checkbox的一個簡單應用。