2012-11-01 来源:网络
【实例名称】
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) 进行本实例源码下载