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。