posts - 104,  comments - 34,  trackbacks - 0

在批量处理列表数据时,往往会用到 CheckBox 的全选与取消全选,虽然她的实现原理很简单,但是对新手来说还是有些难度,本文介绍的方法,触发条件独立,可以全选或取消全选指定 name 的 CheckBox , 同一页面可以有多组供全选的 CheckBox ,功能健全,通用性较强。

<input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" />
字母全选开关
<input type="checkbox" name="test" value="a" /> a
<input type="checkbox" name="test" value="b" /> b
<input type="checkbox" name="test" value="c" /> c
<input type="checkbox" name="test" value="d" /> d
<input type="checkbox" name="test" value="e" /> e
<input type="checkbox" name="test" value="f" /> f
<input type="checkbox" name="test" value="g" /> g 
<br /> 
<input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }"  />
数字全选开关
<input type="checkbox" name="num" value="1" /> 1
<input type="checkbox" name="num" value="2" /> 2
<input type="checkbox" name="num" value="3" /> 3 
<br /><br />  <input type="button" value="选择所有的字母" onclick="checkAll('test')" />
<input type="button" value="清空选中的字母" onclick="clearAll('test')" /> 
<br /><br /> 
<input type="button" value="选择所有的数字" onclick="checkAll('num')" />
<input type="button" value="清空选中的数字" onclick="clearAll('num')" /> 


<script type="text/javascript">
 // 说明:Javascript 控制 CheckBox 的全选与取消全选
 function checkAll(name) {    
  var el = document.getElementsByTagName('input');    
  var len = el.length;     for(var i=0; i<len; i++) {        
   if((el[i].type=="checkbox") && (el[i].name==name)) {            
    el[i].checked = true;        
   }    
  }
 }
 
 function clearAll(name) {    
  var el = document.getElementsByTagName('input');    
  var len = el.length;    
  for(var i=0; i<len; i++) {        
   if((el[i].type=="checkbox") && (el[i].name==name)) {            
    el[i].checked = false;        
   }    
  }
 }
</script>

posted on 2007-11-22 22:46 末日风情 阅读(937) 评论(1)  编辑  收藏 所属分类: javascript

FeedBack:
# re: Javascript 控制 CheckBox 的全选与取消全选
2007-11-23 15:02 | CoderDream
非常不错,感谢分享!
已收藏!  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 
<2007年11月>
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678

常用链接

留言簿(4)

随笔分类

随笔档案

搜索

  •  

最新评论

阅读排行榜

评论排行榜