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

最新推荐文章于 2021-02-24 02:49:11 发布

原创最新推荐文章于 2021-02-24 02:49:11 发布 · 576 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #邮箱 #技术 #dhtml #笔记本

J2EE 专栏收录该内容

69 篇文章

订阅专栏

本文介绍了如何使用HTML和JavaScript实现复选框的功能，包括总价计算、全选反选及表格中复选框的批量操作等。通过示例代码展示了实际应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

思想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>