求checkbox的-反全选- 功能

本帖最后由 fengliangcc 于 2010-09-08 19:52:08 编辑

解决方案 »

  1.   


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <input type="button" name="ca" value="checkAll/checkNo" onclick="check()">
    <input type="checkbox" name="a" value="a">a
    <input type="checkbox" name="b" value="b">b
    <input type="checkbox" name="c" value="c">c
    <input type="checkbox" name="d" value="d">d</br>
    </body>
    <script>
    function check(){
    var cbs  = document.getElementsByTagName("input");
    for(var i=0;i<cbs.length;i++){
    var acb = cbs[i];
    if(acb.type=="checkbox"){
    acb.checked = !acb.checked;
    }
    }
    }
    </script>
    </html>
      

  2.   


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <label for="cb" onclick="check()">checkAll/checkNo</label>
    <input type="checkbox" id="flag" name="flag" value=""></br>
    <input type="checkbox" name="a" value="a">a
    <input type="checkbox" name="b" value="b">b
    <input type="checkbox" name="c" value="c">c
    <input type="checkbox" name="d" value="d">d
    </body>
    <script>
    function check(){
    var flag = document.getElementById("flag");
    var cbs = document.getElementsByTagName("input");
    flag.checked = ! flag.checked;
    for(var i=0;i<cbs.length;i++){
    var acb = cbs[i];
    if(acb.type=="checkbox" && acb.id!="flag"){
    acb.checked = flag.checked;
    }
    }
    }
    </script>
    </html>试试这样行不行？加一个标识的checkbox
      

  3.   

    就是 把所有 checkbox 全部处于  未选中  状态 谢谢 
      

  4.   

    太简单了：<head>
    <script>
    var flag=1;
    function Checkall(XelementName)
    {
        var checkboxes=document.getElementsByName(XelementName);
        for(var i=0;i<checkboxes.length;i++)
        {
            if (flag==1)    
                checkboxes[i].checked=true;
            else
                checkboxes[i].checked=false;
        }
        flag=-flag;
    }
    </script>
    </head>
    <body>
        <input type="button" id="btn" value="全选/反选" onclick="Checkall('checkbox1')"/>
        <input type="checkbox" name="checkbox1" value="a">a
        <input type="checkbox" name="checkbox1" value="b">b
        <input type="checkbox" name="checkbox1" value="c">c
        <input type="checkbox" name="checkbox1" value="d">d
    </body>
    </html>
      

  5.   


    注意 checkbox的那么 是不同的 
      

  6.   

    我把自己做一个作业给你看看，这个比较好理解<html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script language="javascript">
    function checkAll(boolValue){
     var allCheck = document.getElementsByName("isBuy");
      for(var i=0;i<allCheck.length;i++){
         if(allCheck[i].type == "checkbox"){
         allCheck[i].checked = boolValue;
     }
      }
    }function checkedAll(){
      var checkMe = document.buyForm.allcheck.checked;
      var allCheck = document.getElementsByName("isBuy");
        for(var i=0;i<allCheck.length;i++){
       if(allCheck[i].type == "checkbox" && checkMe == true){
          allCheck[i].checked = true;
       }else if(checkMe == false){
           allCheck[i].checked = false;
       }
    }
    }
    </script>
    </head><body>
    <form name="buyForm" method="post">
    <a href="javascript:checkAll(true)">全选</a>
    <a href="javascript:checkAll(false)">全不选</a>
    <input type="checkbox" id="allcheck" name="allcheck" value="all" onClick="checkedAll()"/>全选
    <table border="0">
    <tr>
     <td>
      <input type="checkbox" id="isBuy" name="isBuy" value="muisc" />音乐
     </td>
    </tr>
    <tr>
     <td>
      <hr noshade="noshade" style="border:1px #cccccc dashed" />
     </td>
    </tr>
    <tr>
     <td>
      <input type="checkbox" id="isBuy" name="isBuy" value="sport" />运动
     </td>
    </tr>
    <tr>
     <td>
       <hr noshade="noshade" style="border:1px #cccccc dashed" />
     </td>
    </tr>
    <tr>
     <td>
       <input type="checkbox" id="isBuy" name="isBuy" value="book" />看书
     </td>
    </tr>
    </table>
    </form>
    </body>
    </html>
      

  7.   

    name属性是派什么用场的？就是用在这种场合的。id是不能相同的，name属性是可以相同的。
      

  8.   

    做法不错，不过讨论到name属性就有些偏题了，是否选中跟name属性没有直接关系的。楼主自己理清思路想想，其实很简单：
    全选：element.checked = true;
    不选：element.checked = false;
    反选：element.checked = !element.checked;另外注意用词，避免产生歧义。