首页 > 其他 > 详细

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

时间:2014-02-11 01:38:26      阅读:325      评论:0      收藏:0      [点我收藏+]

注意事项:

因为是多个选择的,所以每个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‘]);

?>

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

原文:http://www.cnblogs.com/lin3615/p/3543602.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!