全选择,反选择的复选框使用

注意事项:

因为是多个选择的,所以每个checkbox 必须有 id,而且id 的值相同,name的值用数组的形式表示,如 name="chk[]"

示例:

<!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=gb2312" />
<title>xxx</title>
<script>
function overselect(form){
    var len = form.chk.length;

  /* 当只有一个复选框时,len 返回的值为 undefined */

   if(len == undefined){  

if(form.chk.check){

    form.chk.checked = false;

}else{ 

form.chk.checked = true;

}else{

    for(var i=0; i < len; i++){
        if(form.chk[i].checked){
            form.chk[i].checked=false;
        }else{
            form.chk[i].checked=true;
        }
    }

}
    return false;
}
function allselect(form){
    var len = form.chk.length;

   /*  当只有一个复选框时len返回值为undefined */

   if(len == undefined){

   form.chk.checked = true;

  }else{  

  for(var i=0; i < len; i++){
        form.chk[i].checked=true;
    }

}
    return false;
}
</script>
</head>
<body>
<table border="1" width="150">
<form name="myform" id="myform" method="post" action="test.php">
    <tr>
      <td width="30">radio</td>
    <td width="100">items</td>
  </tr>
     <tr>
      <td width="30"><input  type="checkbox" id="chk" name="chk[]" value="1"  /></td>
    <td width="100">AAA</td>
  </tr>
     <tr>
      <td width="30"><input type="checkbox" id="chk"  name="chk[]" value="2" /></td>
    <td width="100">BBB</td>
  </tr>
     <tr>
      <td width="30"><input id="chk" type="checkbox" id="chk" name="chk[]" value="3" /></td>
    <td width="100">CCC</td>
  </tr>
  <br /><br />
  <a href="#" onclick="allselect(myform)">全选</a>  || <a href="#" onclick="overselect(myform)">反选</a><br /><br />
  <input type="submit" name="sub" value="submit" />
  </form>
</table>
</body>
</html>

test.php文件代码:

<?php

print_r($_POST['chk']);

?>
posted @ 2014-02-10 21:58  好记性还真不如烂笔头  阅读(275)  评论(0编辑  收藏  举报