業務場景:

為列表加上覆選框,選中的則將值填充到一個文字框,最多允許填充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() 方法向/從陣列中新增/刪除專案，然後返回被刪除的專案。