关于动态创建input checkbox的应用 js

业务场景:
为列表加上复选框,选中的则将值填充到一个文本框,最多允许填充10个.列表为动态创建的,可翻页.
代码实现:
1.对复选框的操作

// 复选框 var checkbox = document.createElement("input"); checkbox.setAttribute("type", "checkbox"); checkbox.setAttribute("name", "kk"); checkbox.setAttribute("value", item.showtext); node.appendChild(checkbox); // 翻页时,如果被选中的,则自动勾选 var kdids = $("#kdbh").val(); if(kdids.indexOf(item.id)!=-1){ checkbox.checked = true; } checkbox.onclick = function() { var checked = this.checked; // 如果当前操作为选中,并且已选择的卡口数达到了10则取消当前选择 if(countkk == 10 && checked){ alert("最多只能选择10个卡口，您已选择了10个卡口!"); this.checked = false; return; }else{ var gate= { "id" : item.id, "name" : item.showtext } fillInput(gate,checked); } }

2.选中内容填充到文本框

var countkk = 0; // 已选择的卡口个数 // 将选中的卡口填充到文本框,以及将取消选中的卡口从文本框去除 function fillInput(node,checked) { var kdids = $("#kdbh").val(); var fxids = $("#fxbh").val(); var names = $("#kdmc").val(); var kdmap = kdids.split(","); var fxmap = fxids.split(","); var namemap = names.split(","); if(checked){ // 选中则填充到input中 if (node.id.length == 12) { kdmap.push(node.id); namemap.push(node.name); } if (node.id.length == 13) { fxmap.push(node.id); namemap.push(node.name); } }else{ // 取消选择则从input中去掉 if (node.id.length == 12) { cancleKk(kdmap,node.id); cancleKk(namemap,node.name); } if (node.id.length == 13) { cancleKk(fxmap,node.id); cancleKk(namemap,node.name); } } countkk = kdmap.length-1; $("#kdbh").val(kdmap.join(",")); $("#fxbh").val(fxmap.join(",")); $("#kdmc").val(namemap.join(",")); $("#kkcount").val(countkk); } function cancleKk(kdArray,node){ $.each(kdArray,function(index,item){ if(item == node){ kdArray.splice(index,1); } }); } function doclear(){ window.opener.document.getElementById("${v1}").valuehttps://www.it610.com/article/= ''; window.opener.document.getElementById("${v2}").valuehttps://www.it610.com/article/= ''; if(window.opener.document.getElementById("${v3}")){ window.opener.document.getElementById("${v3}").valuehttps://www.it610.com/article/= ''; $("#fxbh").val(''); } countkk = 0; $("#kdmc").val(''); $("#kdbh").val(''); $("#kkcount").val(countkk); $('input:checkbox').removeAttr('checked'); }

分析:
1.如何确定已选择的个数? 我首先想到的是直接得到指定name的所有选中的checkbox,从而得到个数.可以使用如下代码,在IE7，IE8和IE9兼容模式，IE9标准模式中也能正常使用

var selectChks = $("input[type=checkbox][name=kk]:checked"); var count = selectChks.length;

这样,我只需要在点击复选框之后就可以得到已选择的个数了.然而问题来了.当翻页之后,前面选择的就丢失了.这个时候.我们是不是要解决翻页丢失问题呢?好吧,先来说下在翻页丢失选中的情况下如何获取已选择的个数.
既然选中丢失,那么使用checkbox选中的个数就不准确了,我们直接定义一个全局变量,来存放文本框中填充的个数,点击checkbox时判断如果达到10,并且为选中操作时,则取消并返回.
2.翻页之后,怎么解决丢失的情况? 将选中的存起来,翻页时,去对比,如果存在,则设置选中.
注意点:
1.动态创建input checkbox时,如何添加click事件,如何设置默认选中? 【关于动态创建input checkbox的应用】这两种使用setAttribute都是无效,添加click事件要在appendChild方法之后使用obj.onclick = function(){},默认选中要在appendChild方法之后使用obj.checked=true;
2.splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。具体用法参见http://www.w3school.com.cn/jsref/jsref_splice.asp