DHTML技术演示--- 简答复选框，邮箱复选框学习

来源：互联网发布：网络助手在哪里打开编辑：程序博客网时间：2024/06/05 01:06

一个简单的复选框，如图
这里写图片描述

思想1：

<input type="checkbox" name="item" value="3000" onclick="chk();">笔记本电脑:3000元<br/>

value值，我们自己系统使用。字体3000元给用户看
接下来是代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>dhtml--复选框组件</title>        <script type="text/javascript">            function getSum(){                var sum=0;                var collItemNodes = document.getElementsByName("item");                for(var i=0; i<collItemNodes.length;i++){                    if(collItemNodes[i].checked){                        sum += parseInt(collItemNodes[i].value);                    }                }                //在span中显示计算结果                var strSum = sum + "元";                document.getElementById("sumid").innerHTML= strSum.fontcolor("red").bold();            }            function checkAll(node){                var collItemNodes = document.getElementsByName("item");                for(var i=0; i<collItemNodes.length;i++){                    collItemNodes[i].checked= node.checked;                }            }            function chk(){                var n=0;                var collItemNodes = document.getElementsByName("item");                for(var i=0; i<collItemNodes.length;i++){                    if(collItemNodes[i].checked){                        n++;                    }                }                var oChkAllNode = document.getElementById("chkAll");                if(n==collItemNodes.length){                    oChkAllNode.checked=true;                    oChkAllNode.indeterminate=false;                }else if(n==0){                    oChkAllNode.checked=false;                    oChkAllNode.indeterminate=false;                }else{                    oChkAllNode.indeterminate=true;                }            }        </script>    </head>    <body>        <h2>演示checkbox的用法</h2>        <input type="checkbox" name="item" value="3000" onclick="chk();">笔记本电脑:3000元<br/>        <input type="checkbox" name="item" value="2500" onclick="chk();">台式电脑:2500元<br/>        <input type="checkbox" name="item" value="2000" onclick="chk();">手机:2000元<br/>        <input type="checkbox" name="item" value="1000" onclick="chk();">相机:1000元<br/>        <input id="chkAll" type="checkbox" onclick="checkAll(this);">全选 &nbsp;        总金额是:&nbsp;<span id="sumid"></span><br/>        <input type="button" value="统计" onclick="getSum();">    </body></html>

然后是一个复选框的表格
如图
这里写图片描述
和QQ邮箱非常类似

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>dhtml--复选框组件</title>        <link rel="stylesheet" type="text/css" href="table.css">        <script type="text/javascript">           var bgColor;             function trColor(){              var oTabNode = document.getElementById("mailTable");              var collTrNodes = oTabNode.rows;              for(var i=1;i<collTrNodes.length;i++){                  if(i%2==1){                      collTrNodes[i].className="one";                  }else{                      collTrNodes[i].className="two";                  }                  //悬停高亮显示                  collTrNodes[i].onmouseover=function(){                      bgColor = this.className;                      this.className="over";                  };                  collTrNodes[i].onmouseout=function(){                      this.className=bgColor;                  };              }          }              onload = function(){               trColor();           };           function checkAll(node){               var collMailChkNodes = document.getElementsByName("mail");               for(var i=0;i<collMailChkNodes.length;i++){                   collMailChkNodes[i].checked = node.checked;               }           }           function checkAllByBtn(num){               var collMailChkNodes = document.getElementsByName("mail");               for(var i=0;i<collMailChkNodes.length;i++){                   if(num>1){                      collMailChkNodes[i].checked = !(collMailChkNodes[i].checked);                   }else{                       collMailChkNodes[i].checked = num;                   }               }           }           function delMails(){               //反逻辑，卫条件               if(!confirm("你确认要删除所选的邮件吗?")){                  return;                }               var collMailChkNodes = document.getElementsByName("mail");               /*法1：从前往后删，需要把序号回退一下               for(var i=0;i<collMailChkNodes.length;i++){                   if(collMailChkNodes[i].checked){                       //获取当前复选框所在的<tr>行对象                       var oTrNode = collMailChkNodes[i].parentNode.parentNode;                       //删除当前行                       oTrNode.parentNode.removeChild(oTrNode);                       i--;//因为行集合是动态变化的，删除第i行之后，原来的第i+1自动更新为第i行。因此这里要回退一下                   }               }               */               //法2: 从后往前删，更简单               for(var i=collMailChkNodes.length-1;i>=0;i--){                   if(collMailChkNodes[i].checked){                       var oTrNode = collMailChkNodes[i].parentNode.parentNode;                       oTrNode.parentNode.removeChild(oTrNode);                   }               }           }        </script>    </head>    <body>        <h2>演示checkbox和table的用法</h2>        <table id="mailTable">            <tr>                <th><input type="checkbox" name="aa" onclick="checkAll(this);">全选</th>                <th>发件人</th>                <th>邮件标题</th>                <th>附件</th>            </tr>            <tr>                <td><input type="checkbox" name="mail"></td>                <td>张三1</td>                <td>邮件标题1</td>                <td><a href="#">附件1</a>,附件2</td>            </tr>            <tr>                <td><input type="checkbox" name="mail"></td>                <td>张三2</td>                <td>邮件标题2</td>                <td><a href="#">附件1</a>,附件2</td>            </tr>            <tr>                <td><input type="checkbox" name="mail"></td>                <td>张三3</td>                <td>邮件标题3</td>                <td><a href="#">附件1</a>,附件2</td>            </tr>            <tr>                <td><input type="checkbox" name="mail"></td>                <td>张三4</td>                <td>邮件标题4</td>                <td><a href="#">附件1</a>,附件2</td>            </tr>            <tr>                <td><input type="checkbox" name="mail"></td>                <td>张三5</td>                <td>邮件标题5</td>                <td><a href="#">附件1</a>,附件2</td>            </tr>            <tr>                <td><input type="checkbox" name="mail"></td>                <td>张三6</td>                <td>邮件标题6</td>                <td><a href="#">附件1</a>,附件2</td>            </tr>            <tr>                <td><input type="checkbox" name="mail"></td>                <td>张三7</td>                <td>邮件标题7</td>                <td><a href="#">附件1</a>,附件2</td>            </tr>            <tr>                <td><input type="checkbox" name="mail"></td>                <td>张三8</td>                <td>邮件标题8</td>                <td><a href="#">附件1</a>,附件2</td>            </tr>        </table>        <input type="button" value="全选" onclick="checkAllByBtn(1);"> &nbsp; &nbsp;        <input type="button" value="全部取消" onclick="checkAllByBtn(0);">  &nbsp; &nbsp;        <input type="button" value="反选" onclick="checkAllByBtn(2);">  &nbsp; &nbsp;        <input type="button" value="删除邮件" onclick="delMails();">    </body></html>

0 0