关于动态创建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