最近做到一个项目,需要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。