JavaScript入门笔记:全选功能的实现
2015-05-18 18:30
525 查看
当页面提供了复选框之后,一般还会提供“全选”与“取消全选”(或”全不选“)按钮。那么如何通过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>
相关文章推荐
- 用javascript实现treeview上的checkbox全选功能
- javascript实现复选框的全选功能
- javascript实现复选框的全选功能
- 用javascript实现select全选和取消选择的功能.
- js javascript 实现复选框全选功能 删除复选框选中项功能
- 利用JavaScript实现GridView中表头CheckBox的全选功能
- 利用JavaScript实现GridView中表头CheckBox的全选功能
- JavaScript实现复选框的全选功能
- 利用javascript实现复选框的全选功能
- javascript 全选与全取消功能的实现代码
- 【转载】利用JavaScript实现GridView中表头CheckBox的全选功能
- 利用JavaScript实现GridView上方的 全选中,全驳回 控制 GridView中 CheckBox的功能
- CheckBox全选功能的实现--JavaScript
- JavaScript中复选框的全选和反选功能的实现
- javascript 全选与全取消功能的实现
- Javascript实现复选框(全选反选功能)
- javascript实现复选框的全选功能
- 学习笔记二:checkbox实现全选功能
- javaScript实现全选功能
- javascript实现全选全取消功能