当前位置:软件学堂 > 资讯首页 > 网络编程 > 编程其他 > JS代码实现复选框全选(2)

JS代码实现复选框全选(2)

2012/11/1 20:08:30作者:佚名来源:网络

移动端

【实例名称】

JS代码实现复选框全选(2)

【实例描述】

复选框的全选功能通过服务器端开发语言可以很方便地实现,但有时为了提高页面的访问速度,需要使用JavaScript完成。本例学习实现全选的JavaScript方法。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> <SCRIPT LANGUAGE="JavaScript"> function checkAll(str) {   var a = document.getElementsByName(str);       //获取所有复选框   var n = a.length;                              //获取复选框的个数   for (var i=0; i<n; i++)   a[i].checked = window.event.srcElement.checked; //通过单击的按钮判断是选中还是未选 } </script> </head> <body> <input type=checkbox name=All onclick="checkAll('ck')">全选<br/> <input type=checkbox name=ck  >体育<br/> <input type=checkbox name=ck  >旅游<br/> <input type=checkbox name=ck  >饮食<br/> <input type=checkbox name=ck  >影视<br/> <input type=checkbox name=ck  >音乐<br/><br/></body> </html>

【运行效果】

复选框全选运行效果

【难点剖析】

本例的重点是如何获取页面中所有的复选框控件。使用“document.getElementsByName”可以获取页面中所有的复选框控件,然后使用“window.event.srcElement.checked”判断是选中还是未选。

【源码下载】

如果你不愿复制代码及提高代码准确性,你可以点击:复选框全选(2) 进行本实例源码下载 

标签: JS代码  复选框  全选