绿色生命 Jiarry.126.com

JavaScript添加删除checkbox

关键词： 添加    删除    checkbox    JavaScript    DOM                                          

一个实时添加删除checkbox的实例，通过javascript操作html DOM，这样可以通过ajax里的xmlhttp来实现无刷新的增删checkbox框，显示通过ajax来取得，添加也可以通过ajax来向后台提交，那样效果将是非常棒的，这里只是演示javascript操作部分，xmlhttp.request操作后台，也很简单。后续提供。
演示地址：http://lslnx.zsu.edu.cn/webspace/78229/personel_web/jiarry/resources/addCheckbox.html

http://

---

code source:

<script type="text/javascript">
function $() {//form prototype.js
  var elements = new Array();
  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);
    if (arguments.length == 1)
      return element;
    elements.push(element);
  }
  return elements;
}

//cody by jarry;
String.prototype.trim = function()
{ return this.replace(/(^\s*)|(\s*$)/g, "");}
function isExist(child,obj){ 
 //obj has element the child;
   for(var i=0;i<obj.elements.length;i++){
    if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox"){
       if(obj.elements[i].value==child)return true;
    }
   }
   return false;
}
function validateURL(url){
 //validateURL
 if(url.search(/^[A-Za-z0-9 -]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/)!=0){
 return false;
 //}else if(url.substring(0,4)=="www."){
 //网址不要前面的www.，如果没用的话可以注释掉;
 //return false;
 }else{
 return true;
 }
}

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

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

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

  var list=document.getElementById("list");
  var chkbox=document.createElement("input");
  chkbox.type="checkbox";
  chkbox.onclick=function(){clickchk(obj);}//全部选择后check按钮显示取消;
  chkbox.value=url;
  chkbox.name="url_chkbox";
  var hr=document.createElement("hr");
  hr.size="0";hr.style.borderTop="1px solid gray";
  var txt=document.createTextNode(url); 
 
//start add element;
  list.appendChild(chkbox);
  list.appendChild(txt);
  list.appendChild(hr);
//end add;

//如果已经添加了多选框则去掉禁用;
  if(obj.check.disabled==true){
    obj.check.disabled=false;
    obj.remove.disabled=false;
    }
}
function checkall(obj){//全选or取消全选;
 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=="checkbox"){
      if(chk.value==strAll){//check all checkbox input;
      obj.elements[i].checked=true;
      }else{
       obj.elements[i].checked=false;
      }
    }
  }
  if($('list').childNodes.length<=1)return;
  chk.value=chk.value==canAll?strAll:canAll;
  //更改全选/取消的显示;
}
function del(list,obj){

  var candel=false;
  var i=list.childNodes.length;
  var end = -1;
 //alert(list.childNodes.length+"\n"+list.innerHTML);
   while(  i > end ){ 

     /* if(typeof(list.childNodes[i]) != "undefined")
      {//delete all elements;
      list.removeChild(list.childNodes[i]);   
      }*/

     var  s=list.childNodes[i];
    
     if( typeof(list.childNodes[i]) != "undefined" && s.type=="checkbox" && s.checked==true){
         try{
                        
           list.removeChild(s.nextSibling.nextSibling);
           list.removeChild(s.nextSibling);     
           list.removeChild(s);  
           //list.removeChild(s.previousSibling);
       candel=true;
      
          }catch(ex){
           //alert(ex.toString());        
         }
       }
           
      i--;
   }
   if(candel==false){alert("请选择你要删除的选项")}
  obj.check.disabled=list.childNodes.length>1?false:true;
  obj.check.value=strAll;
  obj.remove.disabled=list.childNodes.length>1?false:true;
    
}
</script>
</HEAD><BODY>
<form name="sitelist">
http://<INPUT TYPE="text" size="30" NAME="url"> <INPUT TYPE="button" NAME="add" value="添加网址至列表" onclick="addSite(this.form)">
<div style="border:1px groove blue;width:400px;height:200px;padding:5px;overflow:auto" id="list">
<input type=checkbox value="example.com" name="url_chkbox" onclick="clickchk(this.form)">example.com <hr style="1px solid gray" size="0">
</div>
<INPUT TYPE="button" NAME="check" value="全选" disabled onclick="checkall(this.form)"> <INPUT TYPE="button" NAME="remove" disabled value="删除" onclick="del($('list'),this.form)">
</form>
<script>
//页面加载时初始化
function init(l,f){
  var list=l;
  f.check.disabled=list.childNodes.length>1?false:true;
  f.check.value=strAll;
  f.remove.disabled=list.childNodes.length>1?false:true;
}
window.onload=function(){
 init($("list"),document.sitelist);
}
</script>

【作者: 皮子/Jarry/Jiarry】【访问统计:】【2006年07月25日 星期二 20:33】【 加入博采】【打印】