JavaScript入门笔记:全选功能的实现
来源:互联网 发布:网络电视需要盒子么 编辑:程序博客网 时间:2024/05/16 05:37
当页面提供了复选框之后,一般还会提供“全选”与“取消全选”(或”全不选“)按钮。那么如何通过JavaScript代码实现此功能呢?这里提供了一个思路:利用按钮的onclick事件,调用Javascript函数,并根据传入的参数进行“全选”与“取消全选”(或”全不选“)操作,下面是完整的代码,存入一个html文件即可运行演示:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>全选</title><script language="javascript"> /* 定义函数,两种写法都是可以的
<span style="white-space:pre"></span>function selectAll(name,tagName,type,scope)*/ var selectAll=function(name,tagName,type,scope){
<span style="white-space:pre"></span> /*根据标签名称("input")获取所有的控件集合*/ elements = document.getElementsByTagName(tagName);var len = elements.length;for(var i = 0;i<len;i++){
<span style="white-space:pre"></span>/*如果标签类型是<span style="font-family: Arial, Helvetica, sans-serif;">checkbox且标签名是</span><span style="font-family: Arial, Helvetica, sans-serif;">checkbox1,</span>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre"></span>则根据传入的参数决定如何操作</span><span style="font-family: Arial, Helvetica, sans-serif;">*/</span><span style="font-family: Arial, Helvetica, sans-serif;"></span>if(elements[i].type==type&&elements[i].name==name&&scope=='all'){elements[i].checked=true;}else if(elements[i].type==type&&elements[i].name==name&&scope=='none'){elements[i].checked=false;}}}</script></head><body>复选框<form><br/>a:<input type="checkbox" name="checkbox1" value="a" id="a"/><br/>b:<input type="checkbox" name="checkbox1" value="b" id="b"/><br/>c:<input type="checkbox" name="checkbox1" value="c" id="c"/><br/>d:<input type="checkbox" name="checkbox1" value="d" id="d"/><br/>e:<input type="checkbox" name="checkbox1" value="e" id="e"/><br/>f:<input type="checkbox" name="checkbox1" value="f" id="f"/><br/><input type="button" onclick="selectAll('checkbox1','input','checkbox','all');" value="全选"/><input type="button" onclick="selectAll('checkbox1','input','checkbox','none');" value="取消全选"/><br/></form></body></html>
1 0
- JavaScript入门笔记:全选功能的实现
- javaScript实现全选功能
- JavaScript实现全选功能
- javascript实现复选框的全选功能
- CheckBox全选功能的实现--JavaScript
- javascript实现复选框的全选功能
- JavaScript小特效---全选功能的实现
- checkbox全选功能javascript实现
- 《JavaScript学习笔记四》:getElementsByTagName的使用以及全选、反选和取消功能实现
- 实现全选的功能
- 用javascript实现select全选和取消选择的功能.
- 利用JavaScript实现GridView中表头CheckBox的全选功能
- javascript 全选与全取消功能的实现
- 利用javascript实现复选框的全选功能
- JavaScript中实现一键全选功能
- javascript实现复选框全选功能
- 实现全选功能的代码
- 全选/全不选功能的实现
- 关于sql的一部分知识
- hdu4310
- hibernate(1)
- Android音频系统之AudioPolicyService
- 02-线性结构2. Reversing Linked List (25)
- JavaScript入门笔记:全选功能的实现
- 精选30道Java笔试题解答
- 安装LoadRunner11后运行Mercury Web Tours Application,点击flights时右边空白,解决办法
- Mybatis 目录
- 正确理解回调函数
- mysql数据库备份基础
- mysql全量、增量备份脚本
- mybatis二级缓存
- RFID相关——普通IO口模拟SPI总线的实现: