checkbox複選框 翻頁複選

    最近做到一個項目，需要checkbox翻頁複選這個功能。網上查了下，沒什麼好的方法，這裏將我的實現分享出來，看看大家有沒有更好更有效的方法。

閒話不多說了，首先關於checkbox：

Checkbox 對象

Checkbox 對象代表一個 HTML 表單中的 一個選擇框。

在 HTML 文檔中 <input type="checkbox"> 每出現一次，Checkbox 對象就會被創建。

您可以通過遍歷表單的 elements[] 數組來訪問某個選擇框，或者通過使用 document.getElementById() 。

 

Checkbox 對象屬性

這裏介紹幾個常用屬性：

 

checked

設置或返回 checkbox 是否應被選中。

id	設置或返回 checkbox 的 id。

name	設置或返回 checkbox 的名稱。

value

設置或返回 checkbox 的 value 屬性的值

 

document.getElementById()跟document.getElementsByName()

getElementById()根據標籤id獲得對象，返回的是一個對象。

getElementsByName()根據name獲得對象數組，返回值爲多個對象組成的數組。

 

 

設計思路：設置頁面變量將每次勾選信息保存在變量中，翻頁後傳遞給後臺在傳入跳轉頁。累加選中信息，選擇結束後提交到後臺進行處理。

1、事件觸發：onclick事件

<input type="checkbox" value="${term.termid}|tmk" name = "checkbox" id ="checkbox_tmk" οnclick="changeMediu(this)"/>

2、勾選信息保存刪除：

var message = null;//定義保存勾選內容變量

function changeMediu(obj){
 var alflag =0;//設置增刪標誌
 var list ="";
 list = message.split(",");
 for(var j=0;j<list.length;j++){
  if(list[j] == obj.value){
   alert("list{j}  "+list[j]);
   alert("obj.value  "+obj.value);
   message=message.replace(","+obj.value,"");
   alflag=1;
   break
  }
 }
 if(alflag==0){
  message+=","+obj.value;
 }
 $('listsubmit').value=message;//更新隱藏input值
}

 

 

3、顯示勾選內容：客戶上翻頁顯示已勾選內容（onload事件頁面自動觸發check（））

function check(){
	
	if(message==null){
		message=document.getElementById("checklist").value;
		$('listsubmit').value = message;
		showcheck();
		return;
	}else{
		alert("check point _1");
	}
	
}

function showcheck(){
	alert("in showcheck")
	var checkboxs = document.getElementsByName("checkbox");
	var result = message.split(",");
	for(var i=0;i<result.length;i++){
		alert("reslut["+i+"] "+result[i]);
		for(var j=0;j<checkboxs.length;j++){
			if(checkboxs[j].value==result[i]){
				checkboxs[j].checked = true;
			}
		}
	}
}

4、數據傳輸：這裏是最讓人鬱悶的地方，因爲他們無法通用一套數據。

首先var 變量要傳入後臺，通過界面input標籤觸發.value事件才能通過表單提交後臺。

後臺數據傳回界面也需要一個以藏的標籤接收。爲了測試方便我們分別寫2個標籤

<input type="hidden"" name="checklist" id = "checklist" value="${checklist}"/> 
<input type="hidden" name="listsubmit" id = "listsubmit" value=""/>

勾選後，觸發onclick事件，在事件中觸發listsubmit.value。

並在check（）方法中同步這2個標籤的value。