这个程序是我平时自己用的，现在通过博客与大家分享下，这程序不算是很复杂，按说明修改就可使用了，也特别照顾下那些刚刚入门的学者做个学习参考，当个实例也行。

代码演示：http://www.pantian8.com/read/select_all.html

完整代码如下 ：

 

<!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>

<meta name="keywords" content="潘田简介：有多年的网站设计与网站运营经验，目前主要从事网络营销，网站运营管理，网站策划，网站推广管理。">

</head>

 

<body>

<p>本程序由<a href="http://www.pantian8.com">潘田</a>编写，欢迎使用，有问题或不会用的请在博客上留言，我给大家指导。</p>

<p style="background:#6CF;border:1px #39F solid;">潘田简介：有多年的网站设计与网站运营经验，目前主要从事网络营销，网站运营管理，网站策划，网站推广管理。</p>

<p>

  <input type="checkbox" id="1" value="2222" name="jj" onclick="d(this)"/>

  <input type="checkbox" id="2" value="2222" name="jj" onclick="d(this)"/>

  <input type="checkbox" id="3" value="2222" name="jj" onclick="d(this)"/>

  <input type="checkbox" id="4" value="2222" name="jj" onclick="d(this)"/>

  <input type="checkbox" id="5" value="2222" name="jj" onclick="d(this)"/>

  <input type="checkbox" id="6" value="2222" name="jj" onclick="d(this)"/>

  <input type="checkbox" id="7" value="2222" name="jj" onclick="d(this)"/>

  <input type="checkbox" id="8" value="2222" name="jj" onclick="d(this)"/>

  <input type="checkbox" id="9" value="2222" name="jj" onclick="d(this)"/>

  <input type="checkbox" id="10" value="2222" name="jj" onclick="d(this)"/>

  <input type="checkbox" id="11" value="2222" name="jj" onclick="d(this)"/>

  <input type="checkbox" id="12" value="2222" name="jj" onclick="d(this)"/>

  <input type="checkbox" id="13" value="2222" name="jj" onclick="d(this)"/>

  <input type="checkbox" id="14" value="2222" name="jj" onclick="d(this)"/>

  <input type="checkbox" id="15" value="2222" name="jj" onclick="d(this)"/>

</p>

<input type="button" value="全选"/>

<input type="button"value="反选" onclick="to_select('jj')"/>

 注意：所有name属性值要全部一样，id的值是从1开始递增，有多少个就多少个;select_num的值是限制选择复选框的数量，这在里是指点击选择时才有效限制，全选功能则不很，这只是演示，具体的自己可以加相应的限制。

</p>

<script>

 

var cj=0;

var select_num=10;//制复选框个数

 

function d(ch){

    if(ch.checked){

          cj++;

  if(cj>select_num){

          alert("你的选择已超过"+select_num+"的限制");

 

ch.checked=false;

return;

}

}else{cj--}

}

function select_all(sid){//全选

var se_len=document.getElementsByName(sid).length;

 

for(var i=0;i<se_len;i++){

 

if(!document.getElementById(i+1).checked){

 

document.getElementById(i+1).checked=true;

 

}

}

}

function to_select(sid){//反选

var se_len=document.getElementsByName(sid).length;

 

for(var i=0;i<se_len;i++){

 

if(document.getElementById(i+1).checked){

document.getElementById(i+1).checked=false;

}else{

document.getElementById(i+1).checked=true;

}

}

}

</script>

</body>

</html>

 

 

原创文章请注明转载自潘田博客，本文地址：http://www.pantian8.com/read/12.html