checkbox.js

采用JSP + Ajax + 文本来演示多选、全选

var strAll=unescape("%u5168%u9009");
var canAll=unescape("%u53D6%u6D88");

//define form,all check button,list DIV
/* checkbox.jsp采用这种方式,checkbox2.jsp采用原来的方式
* 多选框调用方法,与下面将函数写在外面的方式相同,其它js操作代码也可以按此来整理;
*　var newCheckBox = selectCheckBox;　
*　var theForm = document.forms["sitelist"];
*　newCheckBox.obj = theForm;	
*　newCheckBox.chkname = "check";
*　newCheckBox.list  = $("list");
*
*/
var selectCheckBox = {
    obj : this.obj,
	chkname : this.chkname,
    list : this.list,
    
//单击多选框
	clickchk : function(){
	var allcheck=true;
	var obj = this.obj;
	var chk = this.obj.elements[this.chkname];
	   for(var i=0;i<obj.elements.length;i++){
		var eli = obj.elements[i];
		if(eli.tagName.toLowerCase()=="input" && eli.type=="checkbox"){
		  eli.parentNode.style.backgroundColor = eli.checked ? checkedCol :"";
		  if(eli.checked==false){allcheck=false;}
		 }
	  }
	  chk.value=allcheck?canAll:strAll; 
	},

//选择全选
  checkall : function (){//全选or取消全选;
  	var chk = this.obj.elements[this.chkname],obj = this.obj,list = this.list;
   for(var i=0;i<obj.elements.length;i++){
    var eli = obj.elements[i];
    if(eli.tagName.toLowerCase()=="input" && eli.type=="checkbox"){
      if(chk.value==strAll){//check all checkbox input;
      eli.checked=true;
	  eli.parentNode.style.backgroundColor = checkedCol;
      }else{
       eli.checked=false;
	   eli.parentNode.style.backgroundColor = emptyCol;
      }         
    }
  }
 if(list.childNodes.length<=1)return;
  chk.value=chk.value==canAll?strAll:canAll;
  //更改全选/取消的显示;
   //setStatus($("list"),document.sitelist);
},

//单击反选
	reverseCheck : function (){
    var chk = this.obj.elements[this.chkname],obj = this.obj;
	  for(var i=0;i<obj.elements.length;i++){
		if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type.toLowerCase()=="checkbox"){
		  obj.elements[i].checked = obj.elements[i].checked ? false : true;
		}
		this.clickchk(obj);
	  } 
	}
/*	,

	setclick : function(){
	var allcheck=true;
	var obj = this.obj;
	var chk = this.obj.elements[this.chkname];	   
	for(var i=0;i<obj.elements.length;i++){
		var eli = obj.elements[i];
		if(eli.tagName.toLowerCase()=="input" && eli.type.toLowerCase()=="checkbox" ){
            alert(eli.value);
		   eli.onclick = function(){
			   this.clickchk();
			   alert(eli.value);
		    }
		 }
	  }	
	}*/
}

////////////////////////
//checkbox2.jsp采用此方法
//改成上面这种方式写成对象的方式也可以
function clickchk(obj){
var allcheck=true;
   for(var i=0;i<obj.elements.length;i++){
    var eli = obj.elements[i];
    if(eli.tagName.toLowerCase()=="input" && eli.type.toLowerCase()=="checkbox"){
	  eli.parentNode.style.backgroundColor = eli.checked ? checkedCol :"";
      if(eli.checked==false){allcheck=false;}
     }
  }
  obj.elements["check"].value=allcheck?canAll:strAll;  
}

function checkall(obj){//全选or取消全选;
	var chk=obj.elements["check"];
   for(var i=0;i<obj.elements.length;i++){
    var eli = obj.elements[i];
    if(eli.tagName.toLowerCase()=="input" && eli.type.toLowerCase()=="checkbox"){
      if(chk.value==strAll){//check all checkbox input;
      eli.checked=true;
	  eli.parentNode.style.backgroundColor = checkedCol;
      }else{
       eli.checked=false;
	   eli.parentNode.style.backgroundColor = emptyCol;
      }         
    }
  }  
 if($('list').childNodes.length<=1)return;
  chk.value=chk.value==canAll?strAll:canAll;
  //更改全选/取消的显示;
   //setStatus($("list"),document.sitelist);
}

function reverseCheck(obj){
  	var chk=obj.elements["check"];
   for(var i=0;i<obj.elements.length;i++){
    if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type.toLowerCase()=="checkbox"){
      obj.elements[i].checked = obj.elements[i].checked ? false : true;
    }
    clickchk(obj);
  } 
}
/////////////////////////////////////////////////////





//////////////////////////////////////
//以下是动态添加checkbox框的js代码

function getCheckBoxLen(obj){
   var len=0;
   for(var i=0;i<obj.elements.length;i++){
    if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type.toLowerCase()=="checkbox"){
       len++;
	}
  }
  return len;
}

function spanLink(text , tag){
	var temobj = document.createElement(tag);
	temobj.style.color="green";
	temobj.style.textDecoration="underline";temobj.style.cursor="pointer";
	temobj.appendChild( document.createTextNode(text) );
	temobj.onclick=function(){
	   var shttp = "http://";
	   var url = text.substring(0,7)!=shttp ? shttp+text : text ;
	   window.open(url);
	}
	//temobj.style.fontSize="14px";
    return temobj;	
}

function ahrefLink(text,tag){
      var txt=document.createTextNode(text);  
	  var ahref=document.createElement("a");
      ahref.appendChild(txt);
	  //ahref.setAttributes("aaa") = "http://"+url;
	   var shttp = "http://";
	   var hreflink = text.substring(0,7)!=shttp ? shttp+text : text ;
	   ahref.href = hreflink;
	   ahref.target="_blank";
	  //ahref.style.fontSize="14px";
	  return ahref;
}

function appendToList(chkbox,ahref){
// append checkbox into list DIV;
	  var div=document.createElement("div");
	  div.appendChild(chkbox);
	  div.appendChild(ahref);
	  div.style.borderBottom="1px dashed gray";
	  div.style.padding="5px";

	  div.onmouseover=function(){
	   showDelete(this);
	  }
	  div.onmouseout=function(){
	   hideDelete(this);
	  }


	  var list = $("list");
	  list.appendChild(div);

}

function addSite(obj){

  var url=obj.url.value.trim();
  if(url.match(/^\s*$/g) || !validateURL(url)){alert("请输入正确网址：如www.mysite.com 或 www.域名.cn");obj.url.focus();return false;}
  if(isExist(url,obj)){alert("你添加的网址已经存在列表中");return false;}

  var chkboxname = "url_chkbox" + ( getCheckBoxLen(obj)+1 );


/**************************/
// append use dom
	 function appendCheckbox(){
	 //js add checkbox 

	  var chkbox=document.createElement("input");
	  chkbox.type="checkbox";
	  chkbox.onclick=function(){clickchk(obj);}//全部选择后check按钮显示取消;
	  chkbox.value = url;
	  chkbox.name = chkboxname;

	  var ahref = ahrefLink(url,"span");//改a为span,以便快速去掉链接

	//start add element;
      appendToList(chkbox,ahref);
	//end add;

	}

/**************************/
// get feedback data;
	function sendcheckbox(){
		var chklist = this.req.responseText;
	    //alert( chklist );
		if(chklist.indexOf("\"$appendOK$\"")!=-1){//得到添加成功反馈后即开始通过DOM添加
			closeTip();
			appendCheckbox();//server has added the checkbox,call client to add; 
			}
	  }
 

//start xmlhttp post;
 showTip("正在添加...");
 var suburl = obj.action;
 var _name = "name=" + encodeURIComponent(chkboxname);
 var _value = "value=" + encodeURIComponent(url);
 var _desc = "desc=" + encodeURIComponent(url);
 var params = _name +"&"+ _value +"&"+ _desc;
 //showTip("send...");
 //alert(params);
 var sendadd = new net.ContentLoader( suburl ,sendcheckbox,null,"POST",params,null);


/////////////////////////////////////////bakup xmlhttp request;
/*
var xmlhttp=false;

//这样比下面更详细，还有报错提示
		//xmlhttp = false;
		if(window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
			if (xmlhttp.overrideMimeType) {
				xmlhttp.overrideMimeType("text/xml");
			}
		}
		else if (window.ActiveXObject) { 
			try {
				xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
		}
		if (!xmlhttp) {
			window.alert("不能创建XMLHttpRequest对象实例.");
			//return false;
		}

try{
	xmlhttp.open("get",suburl+"?"+ params,true); 
	 xmlhttp.onreadystatechange=function() {
		  if(xmlhttp.readyState==4){
			   if (xmlhttp.status!=404) {
							  alert(xmlhttp.responseText);
				 
			   } else {

				}
		  }
	 }
  xmlhttp.send(null);
 }catch(e){
   alert(e);
 }
*/
////////////////////////////////////////



 //end xmlhttp post;

//如果已经添加了多选框则去掉禁用;