CheckBox 全选和反选 JS

 【方法一】
 <table  id="tbList"><tr><td>
    <asp:DataList ID="DataList1" runat="server" Width="100%"
               >
               <HeaderTemplate>
                   <table style="width:100%;font-size:10pt;" border="0" cellpadding="0" cellspacing="0">
                         <tr>
                              <td class="two_out_three_net1" align="center">
                                  <input id="cbxItemAll" runat="server" name ="chkAll" οnclick="IsorNotAll(this);" type="checkbox" />
                                 
                              </td>
                              <td class="two_out_three_net2" align="center">标题</td>
                              <td class="two_out_three_net3" align="center">点击数</td>
                              <td class="two_out_three_net4" align="center">属性</td>
                              <td class="two_out_three_net5" align="center">状态</td>
                         </tr>
                   </table>
               </HeaderTemplate>
               <ItemTemplate>
                   <table style="width:100%;font-size:10pt;" border="0" cellpadding="0" cellspacing="0">
                         <tr>
                              <td class="two_out_three_net6" align="center">
                                   <input type="checkbox" id="ChkBox" runat="server" οnclick="check(this);" title='<%#Eval("id")%>'  value='<%# Eval("id")%>' name="chkbx" />
                              </td>
                             <td class="two_out_three_net7" align="left"> <%#Eval("Title")%></td>
                              <td class="two_out_three_net8" align="center"><%#Eval("Clicks")%></td>
                              <td class="two_out_three_net9" align="center"><%#Get_IsTop(Eval("IsTop"))%></td>
                              <td class="two_out_three_net10"align="center"><%#Get_Audits(Eval("Audits"))%></td>
                         </tr>
                   </table>
               </ItemTemplate>
             </asp:DataList>
             </td></tr></table>
<input type="text" id="txtGetList" />

下面是几个js方法，放到头文件<script></script>里面
      //选择或者取消选择时改变隐藏控件的值，如果都被选择，则全选也被勾选
        function check(obj) {
            if (obj.checked) {
                document.getElementById("txtGetList").value += " "+obj.value + ",";
            }
            else {
                document.getElementById("txtGetList").value = document.getElementById("txtGetList").value.replace(" "+obj.value+",", "");
            }
            //全选按钮的勾选
             var datalist = document.getElementById('tbList');//获得那个表格table
            if (datalist != null)
            {
                var chkArray = datalist.getElementsByTagName("input");//表格内所有表单元素
                var ischk=true;
                for (var i = 0; i < chkArray.length; i++) //遍历所有表单元素
                {
                    if (chkArray[i].type == 'checkbox') //如果是checkbox
                    {
                        if( chkArray[i].checked ==false)//如果没勾选
                        {
                           ischk=false;
                        }
                    }
                }
                if( chkArray.length>0&&ischk)
                {
                    document.getElementById("chkAll").checked=true;
                }
                else
                {
                    document.getElementById("chkAll").checked=false;
                }
            }
           
        }
           //全选
           function checkall() {
            var datalist = document.getElementById('tbList');//获得那个表格table
            if (datalist != null) {
                var chkArray = datalist.getElementsByTagName("input");//表格内所有表单元素
                for (var i = 0; i < chkArray.length; i++) {
                    if (chkArray[i].type == 'checkbox') {//如果是checkbox
                    if( chkArray[i].checked ==false)//如果没勾选
                    {
                        chkArray[i].checked = true;//勾选
                        document.getElementById("txtGetList").value += " "+chkArray[i].value + ",";//隐藏控件，记录所有选择项
                    }
                    }
                }
            }
        }
         //判断是否有选择项
         function IsSelected() {
         alert(document.getElementById("txtGetList").value );//test
            var datalist = document.getElementById('tbList');
            if (datalist != null) {
                var chkArray = datalist.getElementsByTagName("input");
                var temp = false;
                for (var i = 0; i < chkArray.length; i++) {
                    if (chkArray[i].type == 'checkbox') {
                        if (chkArray[i].checked) {
                            temp = true;
                        }
                    }
                }
               
                return temp;
            }
            else {
                return false;
            }
        }
          //全取消
          function CancleSelected() {
            var datalist = document.getElementById('tbList');
            var chkArray = datalist.getElementsByTagName("input");
            for (var i = 0; i < chkArray.length; i++)
            {
               if (chkArray[i].type == 'checkbox')
               {
                  if (chkArray[i].checked)
                  {
                     chkArray[i].checked = false;
                  }
               }
            }
            document.getElementById('txtGetList').value = "";
        }

        //取消全选
        function canclecheckall() {
            var datalist = document.getElementById('tbList');//
            if (datalist != null)
              {
                var chkArray = datalist.getElementsByTagName("input");
                for (var i = 0; i < chkArray.length; i++)
                {
                    if (chkArray[i].type == 'checkbox')
                    {
                        chkArray[i].checked = false;
                    }
               }
               document.getElementById("txtGetList").value = "";
            }
        }
        //全选或者全不选
        function IsorNotAll(obj)
        {
            if (obj.checked)
            {
              checkall();
            }
            else
            {
              canclecheckall();
            }
        }
        
       
【方法二】
<html>
<head>
<title>复选框的全选/全不选/反选</title>
</head>
<script type="text/javascript">
function sec1(a){
 var cks=document.frm.ck;
 var str="";
 for(i=0;i<cks.length;i++){
  cks[i].checked=a;
  if(a)str+=" "+cks[i].value;
 }
 if(a)alert("选中的值为:"+str);
}
function sec2(){
 var cks=document.frm.ck;
 for(i=0;i<cks.length;i++){
  if(cks[i].checked)cks[i].checked=false;
  else cks[i].checked=true;
 }
}
</script>
<body>
<center>
<form name="frm">
<font face="华文行楷" size="+3" color="#9933FF">请选择:</font><br>
<script type="text/javascript">
 var a=new Array("aaa","bbb","ccc","ddd");
 for(i=0;i<4;i++)document.write("<input type=checkbox name=ck value="+a[i]+">"+a[i]+"<br>");
</script>
<br>
<input type="button" value="全选" onClick="sec1(true)">&nbsp;&nbsp;&nbsp;
<input type="button" value="全不选" onClick="sec1(false)">&nbsp;&nbsp;&nbsp;
<input type="button" value="反选" onClick="sec2()">&nbsp;&nbsp;&nbsp;
</form>
</center>
</body>
</html>