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

Javascript
js返回当前网页的url
简明json介绍
JavaScript在IE中“意外地调用了方法或属性访问”
JS获得鼠标位置(兼容多浏览器ie,firefox)修正版
JavaScript 基础问答 四
支持多浏览器(IE、Firefox、Opera)剪切板复制函数
js 解决“options为空或不是对象”
走出JavaScript初学困境—js初学
JavaScript入门教程(6) Window窗口对象
JavaScript 快捷键设置实现代码
Extjs Ajax 乱码问题解决方案
JavaScript 实现模态对话框 源代码大全
[原创]js 日期加红代码 适用于各种cms
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
[原创]javascript 改变字体大小方法集合
javascript 单行文字向上跑马灯滚动显示
一个简单的javascript类定义例子
javascript 类定义的4种方法
javascript类继承机制的原理分析
firefox(火狐)和ie浏览器禁止右键和禁止复制的代码

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-10   浏览: 116 ::
收藏到网摘: 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:上述三种方法,都可实现效果,但如果想实现(全选|反选),就需要根据要求添加