Javascript-网页编程-DHTML-复选框加强

最新推荐文章于 2021-11-19 19:17:00 发布
夏小弥
最新推荐文章于 2021-11-19 19:17:00 发布
阅读量416
点赞数
分类专栏： html网页编程文章标签： javascript html dhtml checkbox
本文链接：https://blog.csdn.net/x121850182/article/details/51919603
版权
html网页编程专栏收录该内容
15 篇文章 0 订阅
订阅专栏
选择框的应用（类似如邮件管理）

实现功能：类似如邮箱中对邮件的管理：
选择邮件，删除邮件，全选，反选，取消全选等
[java]view plaincopy 
   
 <html>  
   <head>  
     <title>DHTML技术演示---checkbox的使用2</title>  
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
      <style type="text/css">  
         @import url(table.css)/*这个css样式要自己写一个文件导入进来*/  
      </style>  
      <script type="text/javascript">  
         var name;  
         function trColor(){  
             var oTableNode = document.getElementById("mailTable");  
             var collTrNodes = oTableNode.rows;  
             for(var x=1; x<collTrNodes.length-1;x++){  
                 if(x%2==1){  
                     collTrNodes[x].className="one";  
                 }else{  
                     collTrNodes[x].className="two";  
                 }  
                 collTrNodes[x].οnmοuseοver=function(){  
                     name = this.className;  
                     this.className="over";  
                     /*下面这种注册事件的方式也可以 
                      this.οnmοuseοut=function(){ 
                         this.className=name; 
                      } 
                     */  
                 }  
                   
                 collTrNodes[x].οnmοuseοut=function(){  
                     this.className=name;  
                 }  
                   
             }  
         }  
        
         onload = function(){  
             trColor();  
         }  
           
         function checkAll(aChkboxNode){  
             var collMailNodes = document.getElementsByName("mail");  
             for(var x=0;x<collMailNodes.length;x++){  
                 collMailNodes[x].checked = aChkboxNode.checked;  
             }  
             var collChkboxAllNodes = document.getElementsByName("all");  
             collChkboxAllNodes[0].checked = aChkboxNode.checked;  
             collChkboxAllNodes[1].checked = aChkboxNode.checked;  
         }  
           
         function checkAllByBtn1(flag){  
             var collMailNodes = document.getElementsByName("mail");  
             for(var x=0;x<collMailNodes.length;x++){  
                 collMailNodes[x].checked = flag;  
             }  
             var collChkboxAllNodes = document.getElementsByName("all");  
             collChkboxAllNodes[0].checked = flag;  
             collChkboxAllNodes[1].checked = flag;  
             //取消部分选中时的显示样式  
             collChkboxAllNodes[0].indeterminate=false;  
             collChkboxAllNodes[1].indeterminate=false;  
         }  
         function checkAllByBtn2(){  
             var collMailNodes = document.getElementsByName("mail");  
             var n=0;  
             for(var x=0;x<collMailNodes.length;x++){  
                 collMailNodes[x].checked = !collMailNodes[x].checked;  
                 if( collMailNodes[x].checked ){  
                     n++;  
                 }  
             }  
               
             var collChkboxAllNodes = document.getElementsByName("all");  
             collChkboxAllNodes[0].indeterminate=false;  
             collChkboxAllNodes[1].indeterminate=false;  
             if(n==0){  
                 collChkboxAllNodes[0].checked = false;  
                 collChkboxAllNodes[1].checked = false;  
             }else if(n==collMailNodes.length){  
                 collChkboxAllNodes[0].checked = true;  
                 collChkboxAllNodes[1].checked = true;  
             }else{//部分选中时的显示样式  
                 collChkboxAllNodes[0].indeterminate=true;  
                 collChkboxAllNodes[1].indeterminate=true;  
             }  
         }  
           
           
         //把上面两个函数合在一起  
         function checkAllByBtn(num){  
             var collMailNodes = document.getElementsByName("mail");  
             //取消部分选中时的显示样式  
             var collChkboxAllNodes = document.getElementsByName("all");  
             collChkboxAllNodes[0].indeterminate=false;  
             collChkboxAllNodes[1].indeterminate=false;  
             var n=0;  
             for(var x=0;x<collMailNodes.length;x++){  
                 if(num>1){  
                   collMailNodes[x].checked = !collMailNodes[x].checked;  
                 }else{  
                    collMailNodes[x].checked = num;  
                 }  
                 if(collMailNodes[x].checked){  
                     n++;  
                 }  
             }  
               
             if(n==0){  
                 collChkboxAllNodes[0].checked = false;  
                 collChkboxAllNodes[1].checked = false;  
             }else if(n==collMailNodes.length){  
                 collChkboxAllNodes[0].checked = true;  
                 collChkboxAllNodes[1].checked = true;  
             }else{//部分选中时的显示样式  
                 collChkboxAllNodes[0].indeterminate=true;  
                 collChkboxAllNodes[1].indeterminate=true;  
             }  
               
         }  
           
         function deleteMail(){  
             if(!confirm("你真的要删除所选邮件吗?")){  
                 return;  
             }  
             //获取所有选中的邮件  
             var collMailChkNodes = document.getElementsByName("mail");  
             for(var x=0;x<collMailChkNodes.length;x++){  
                 if(collMailChkNodes[x].checked){//选中，则删除  
                     //先拿到tr对象  
                     var oTrNode = collMailChkNodes[x].parentNode.parentNode;  
                     oTrNode.parentNode.removeChild(oTrNode);  
                     //bug:节点容器中，remove之后，长度会变。  
                     x--;//长度修正--还有一种解决方案是：从后往前删  
                 }  
             }  
             trColor();  
         }  
           
      </script>  
   </head>  
     
   <body>  
     <h2>邮件列表</h2>  
     <table id="mailTable">  
         <tr>  
             <th><input type="checkbox" name="all" οnclick="checkAll(this)"/>全选</th>  
             <th>发件人</th>  <th>邮件标题</th> <th>时间</th>  
         </tr>  
         <tr>  
             <td><input type="checkbox" name="mail" /></td>  
             <td>张三</td>  <td>邮件标题11</td> <td>2016年6月16日</td>  
         </tr>  
         <tr>  
             <td><input type="checkbox" name="mail" /></td>  
             <td>李四</td>  <td>邮件标题22</td> <td>2016年6月15日</td>  
         </tr>  
         <tr>  
             <td><input type="checkbox" name="mail" /></td>  
             <td>张四</td>  <td>邮件标题33</td> <td>2016年6月14日</td>  
         </tr>  
         <tr>  
             <td><input type="checkbox" name="mail" /></td>  
             <td>Jack</td>  <td>邮件标题44</td> <td>2016年6月18日</td>  
         </tr>  
         <tr>  
             <td><input type="checkbox" name="mail" /></td>  
             <td>Rose</td>  <td>邮件标题55</td> <td>2016年6月25日</td>  
         </tr>  
         <tr>  
             <td><input type="checkbox" name="mail" /></td>  
             <td>张六</td>  <td>邮件标题66</td> <td>2016年6月16日</td>  
         </tr>  
         <tr>  
             <td><input type="checkbox" name="all" οnclick="checkAll(this)"/>全选</td>  
             <td colspan="3">   
             <!--  
               <input type="button" value="全选" οnclick="checkAllByBtn1(true)">  
               <input type="button" value="取消全选" οnclick="checkAllByBtn1(false)">  
               <input type="button" value="反选" οnclick="checkAllByBtn2()">  
              -->  
                
               <input type="button" value="全选" οnclick="checkAllByBtn(1)">  
               <input type="button" value="取消全选" οnclick="checkAllByBtn(0)">  
               <input type="button" value="反选" οnclick="checkAllByBtn(2)">  
               <input type="button" value="删除所选邮件" οnclick="deleteMail()">  
             </td>  
         </tr>  
           
     </table>      
   </body>  
     
 </html>  
夏小弥
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript-网页编程-DHTML-复选框加强

选择框的应用（类似如邮件管理）实现功能：类似如邮箱中对邮件的管理：选择邮件，删除邮件，全选，反选，取消全选等[java] view plain copy DHTML技术演示---checkbox的使用2 "Content-Type" content="text/html; cha
复制链接

扫一扫
专栏目录