A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 闫常国 于 2013-5-2 17:30 编辑

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全选全不选效果</title>
<script language="javascript">
function checkAll()
{
var b=1;
//alert(b);
if(b==1)
   {
    for(i=0;i<document.getElementsByName("name").length;i++){
     document.getElementsByName("name").checked="true";
     
    }
    b++;<!--执行完后b由1变为2-->
   }
else
   {
    for(i=0;i<document.getElementsByName("name").length;i++){
     document.getElementsByName("name").checked="none";      //是不是这里有问题?
    }
    b--;<!--执行完后b由2变为1-->
   }
}
</script>
</head>
<body>
<p><a href="javascript:checkAll()">全选</a></p>
<form id="form1" name="form1" method="post" action="">
  <p>
  <label>
    <input type="checkbox" name="name" id="checkbox" />
  </label>
    数学</p>
  <p>
    <label>
      <input type="checkbox" name="name" id="checkbox2" />
    </label>
  语文</p>
  <p>
    <label>
      <input type="checkbox" name="name" id="checkbox3" />
    </label>
  英语</p>
  <p>
    <label>
      <input type="checkbox" name="name" id="checkbox4" />
    </label>
  政治</p>
  <p>
    <label>
      <input type="checkbox" name="name" id="checkbox5" />
    </label>
  地理</p>
  <p>
    <label>
      <input type="checkbox" name="name" id="checkbox6" />
    </label>
  历史</p>
</form>
<p> </p>
</body>
</html>

评分

参与人数 1技术分 +1 收起 理由
杞文明 + 1

查看全部评分

2 个回复

倒序浏览
本帖最后由 张伟86 于 2013-5-2 15:00 编辑

1、首先是变量b的问题,b在第一次点击后,退出程序,会销毁;第二次点击后值仍然是1,并没有起到一个标记的作用,应设置为全局变量,参加代码。
2、getElementsByName问题,在for循环中要更改每个checkbox的属性,就要引用每个元素,而getElementsByName返回的是一个数组类型,引用元素需要加下标,即为getElementsByName
3、checkedbox被选中可以为checked="true"或者checked="checked",取消选中为checked=""(为空就可以了);
4、还有label问题,你的label加到了checkbox上面,和不加没什么两样的,估计你是要点击文字,如代码更改。
代码如下:
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>全选全不选效果</title>
  5. <script language="javascript">

  6. var b=1;

  7. function checkAll()
  8. {
  9.     //alert(b);   
  10.     //alert(b);
  11.     if(b==1)
  12.    {
  13.     for(i=0;i<document.getElementsByName("name").length;i++){
  14.      document.getElementsByName("name")[i].checked="checked";//或者checked="true";   
  15.     }
  16.     b++;<!--执行完后b由1变为2-->
  17.    }
  18.     else
  19.    {
  20.     for(i=0;i<document.getElementsByName("name").length;i++){        
  21.      document.getElementsByName("name")[i].checked = "";     
  22.     }
  23.     b--;<!--执行完后b由2变为1-->
  24.    }
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. <p><a href="javascript:checkAll()">全选</a></p>
  30. <form id="form1" name="form1" method="post" action="">   
  31.   <p><input type="checkbox" name="name" id="checkbox" />
  32.   <label for="checkbox">
  33.     数学
  34.   </label>
  35.     </p>
  36.   <p><input type="checkbox" name="name" id="checkbox2" />
  37.     <label for="checkbox2">
  38.       语文
  39.     </label>
  40.   </p>
  41.   <p><input type="checkbox" name="name" id="checkbox3" />
  42.     <label for="checkbox3">
  43.       英语
  44.     </label>
  45.   </p>
  46.   <p> <input type="checkbox" name="name" id="checkbox4" />
  47.     <label for="checkbox4">
  48.      政治
  49.     </label>
  50.   </p>
  51.   <p><input type="checkbox" name="name" id="checkbox5" />
  52.     <label for="checkbox5">
  53.       地理
  54.     </label>
  55.   </p>
  56.   <p><input type="checkbox" name="name" id="checkbox6" />
  57.     <label for="checkbox6">
  58.       历史
  59.     </label>
  60.   </p>
  61. </form>
  62. <p> </p>
  63. </body>
  64. </html>
复制代码

评分

参与人数 1技术分 +1 收起 理由
苏波 + 1

查看全部评分

回复 使用道具 举报
张伟86 发表于 2013-5-2 11:21
1、首先是变量b的问题,b在第一次点击后,退出程序,会销毁;第二次点击后值仍然是1,并没有起到一个标记的 ...

非常感谢 可以出效果了
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马