在网上看了一下别人写的Javascript复选框全选效果,大多代码都写得特别复杂而且特别的多。其实我以前也用写过一个Jquery复选框全选效果,可是我觉得像这么简单的东西没有必要用Jquety。毕竟要用Jquery还要先加载Jquery的源代码,那样额外影响页面的加载速度。于是决定自己来写一个简单而又实用的JS复选框全选效果。
<!DOCtype html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>最简单的Javascript复选框全选效果</title>
</head>
<body>
<Script type=”text/javascript”>
/**
* @Desc Javascript全选效果
* @Author PHP开发者之家
* @Date 2011/7/27
*/
function checkAll(){
var num = document.forms[0].elements['checkbox[]‘];
for(var i in num){
var checks = document.forms[0].elements[i];
if (checks.checked==true) checks.checked=false;
else checks.checked=true;
}
}
</Script>
<form name=”form1″ action=”" method=”get”>
请选择你喜欢程序:<BR>
<input type=”checkbox” name=”checkbox[]” value=”1″>Java
<input type=”checkbox” name=”checkbox[]” value=”2″>C
<input type=”checkbox” name=”checkbox[]” value=”3″>C#
<input type=”checkbox” name=”checkbox[]” value=”4″>C++
<input type=”checkbox” name=”checkbox[]” value=”5″>PHP
<input type=”checkbox” name=”checkbox[]” value=”6″>JavaScript
<input type=”checkbox” name=”checkbox[]” value=”7″>Jsp
<input type=”checkbox” name=”checkbox[]” value=”8″>Asp<BR>
<input type=”button” value=”请单击” name=”button” onclick=”checkAll()”>
</form>
</body>
</html>