黑马程序员技术交流社区

标题: 求高手指教为什么只能全选而不能全不选？ [打印本页]
作者: 闫常国    时间: 2013-5-1 22:27
标题: 求高手指教为什么只能全选而不能全不选？
本帖最后由 闫常国 于 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>

作者: 张伟86    时间: 2013-5-2 11:21
本帖最后由 张伟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">

  7. var b=1;

  9. function checkAll()
  10. {
  11.     //alert(b);   
  12.     //alert(b);
  13.     if(b==1)
  14.    {
  15.     for(i=0;i<document.getElementsByName("name").length;i++){
  16.      document.getElementsByName("name")[i].checked="checked";//或者checked="true";   
  17.     }
  18.     b++;<!--执行完后b由1变为2-->
  19.    }
  20.     else
  21.    {
  22.     for(i=0;i<document.getElementsByName("name").length;i++){        
  23.      document.getElementsByName("name")[i].checked = "";     
  24.     }
  25.     b--;<!--执行完后b由2变为1-->
  26.    }
  27. }
  28. </script>
  29. </head>
  30. <body>
  31. <p><a href="javascript:checkAll()">全选</a></p>
  32. <form id="form1" name="form1" method="post" action="">   
  33.   <p><input type="checkbox" name="name" id="checkbox" />
  34.   <label for="checkbox">
  35.     数学
  36.   </label>
  37.     </p>
  38.   <p><input type="checkbox" name="name" id="checkbox2" />
  39.     <label for="checkbox2">
  40.       语文
  41.     </label>
  42.   </p>
  43.   <p><input type="checkbox" name="name" id="checkbox3" />
  44.     <label for="checkbox3">
  45.       英语
  46.     </label>
  47.   </p>
  48.   <p> <input type="checkbox" name="name" id="checkbox4" />
  49.     <label for="checkbox4">
  50.      政治
  51.     </label>
  52.   </p>
  53.   <p><input type="checkbox" name="name" id="checkbox5" />
  54.     <label for="checkbox5">
  55.       地理
  56.     </label>
  57.   </p>
  58.   <p><input type="checkbox" name="name" id="checkbox6" />
  59.     <label for="checkbox6">
  60.       历史
  61.     </label>
  62.   </p>
  63. </form>
  64. <p> </p>
  65. </body>
  66. </html>
复制代码
作者: 闫常国    时间: 2013-5-2 17:29
张伟86 发表于 2013-5-2 11:21
1、首先是变量b的问题，b在第一次点击后，退出程序，会销毁；第二次点击后值仍然是1，并没有起到一个标记的 ...

非常感谢 可以出效果了



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2