关于动态创建input checkbox的应用

业务场景:

为列表加上复选框,选中的则将值填充到一个文本框,最多允许填充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}").value = '';                window.opener.document.getElementById("${v2}").value = '';                if(window.opener.document.getElementById("${v3}")){              window.opener.document.getElementById("${v3}").value = '';              $("#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事件,如何设置默认选中?

这两种使用setAttribute都是无效,添加click事件要在appendChild方法之后使用obj.onclick = function(){},默认选中要在appendChild方法之后使用obj.checked=true;

2.splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

具体用法参见http://www.w3school.com.cn/jsref/jsref_splice.asp