当前位置: 首页 > 图文教程 > 网络编程 > Javascript > [原创]checkbox实现全选的多种方法 不断更新

Javascript
javascript实例教程(19) 使用HoTMetal(5)
javascript实例教程(19) 使用HoTMetal(6)
javascript实例教程(19) 使用HoTMetal(7)
javascript实例教程(20) OLE Automation(1)
javascript实例教程(20) OLE Automation(2)
javascript实例教程(20) OLE Automation(3)
javascript实例教程(20) OLE Automation(4)
javascript实例教程(20) OLE Automation(5)
javascript实例教程(20) OLE Automation(6)
javascript实例教程(20) OLE Automation(7)
用javascript实现利用FLASH嵌入声音
javascript版的日期输入控件(6)
javascript设计网页中的下拉菜单
javascript设计漫天雪花
javascript制作浮动的工具条
javascript制作闪烁的边框
javascript模拟游戏中的弹出菜单效果
在IE中使用javascript
利用javascript制作简单动画
首页地址添加到收藏夹(javascript)

Javascript 中的 [原创]checkbox实现全选的多种方法 不断更新


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 150 ::
收藏到网摘: n/a

复制代码 代码如下:

<script language=javascript>
//第一种方法
function selectall1()
{
var a = document.getElementsByTagName("input");
if(a[0].checked==true){
for (var i=0; i<a.length; i++)
if (a[i].type == "checkbox") a[i].checked = false;
}
else
{
for (var i=0; i<a.length; i++)
if (a[i].type == "checkbox") a[i].checked = true;
}
}
//第二种方法
function selectall2() {
var tform = document.forms['form1'];
for (var i=0;i<tform.length;i++)
{
var e = tform.elements[i];
if (e.type == "checkbox")
e.checked = !e.checked;
}
}
//第三种方法,结合上述两种方法
function selectall3()
{
var a = document.getElementsByTagName("input");
for (var i=0; i<a.length; i++)
if (a[i].type == "checkbox") a[i].checked =!a[i].checked;
}
//第四种方法
function selectall4(id){ //用id区分
var tform=document.forms['form1'];
for(var i=0;i<tform.length;i++){
var e=tform.elements[i];
if(e.type=="checkbox" && e.name==id) e.checked=!e.checked;
}
}
//第五种方法
function selectall(theform,thename){ //theform指定的form,thename是checkbox的name属性
var tform=document.forms[theform];
document.getElementById("thewen").value='反选';
for(var i=0;i<tform.length;i++){
var e=tform.elements[i];
if(e.type=='checkbox' && e.name==thename)e.checked=!e.checked;
}
}
</script>
<form id="form1" name="form1" method="post" action="">
<input type="checkbox" name="sid" value="1" />
<input name="thes" type="button" onclick="javascript:selectall3()" value="全选" />
</form>


点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

PS:上述三种方法,都可实现效果,但如果想实现(全选|反选),就需要根据要求添加