AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript---网络编程(10)--DHTML技术演示(3)-多选框

2022-04-14 118
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JavaScript---网络编程(10)--DHTML技术演示(3)-多选框

这节讲述多选框的使用，当然，肯定是结合css和Javascript一起的。

checkbox的使用1：

演示代码：

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DHTML技术演示---checkbox的使用1</title>
    <script type="text/javascript">
        //html中<pre></pre>让代码原样输出-小提示
        function getSum(){
            var sum=0;
            var arrChkNode = document.getElementsByName("item");
            for(var x=0;x<arrChkNode.length;x++){
                if(arrChkNode[x].checked){
                    sum+=parseInt(arrChkNode[x].value);
                }
            }
            var sVal = sum+"元";
            //字体颜色设置为红色
            //document.getElementById("sumid").innerHTML="<font color='red'>aaa</font>";
            document.getElementById("sumid").innerHTML=sVal.fontcolor("red");
        }
        function checkAll(aChkAllNode){
            var arrChkNodes = document.getElementsByName("item");
            for(var x=0;x<arrChkNodes.length;x++){
                //arrChkNodes[x].checked=true;//"true"也可以，但不建议这样使用，因为API中要求的是boolean类型
                arrChkNodes[x].checked= aChkAllNode.checked;
            }
        }
    </script>
    </head>
    <body>
        <input type="checkbox" name="item" value="8000"/>空调:8000元<br/>
        <input type="checkbox" name="item" value="160"/>风扇:160元<br/>
        <input type="checkbox" name="item" value="4500"/>电脑:4500元<br/>
        <input type="checkbox" name="item" value="5000"/>投影仪:5000元<br/>
        <input type="checkbox" onclick="checkAll(this)"/>全选<br/>
        <input type="button" value="总金额是：" onclick="getSum()"><span id="sumid"> </span>
    </body>
</html>

屏幕快照 2022-04-14 下午11.23.10.png

checkbox的使用2：

仿邮件选择的方式做多选框

table.css:

table{
    border:#ff80ff 1px solid;
    /*solid  :　 实线边框 */
    width:800px;
    border-collapse:collapse;
    /*separate  :　 默认值。边框独立（标准HTML） 
    collapse  :　 相邻边被合并 
    */  
}
table td{/*table 下面的td*/
    border:#0000ff 1px solid;
    padding:5px;/*内补丁*/
}
table th{
    border:#ff80ff 1px solid;
    padding:5px;
    background-color:#c0c0c0;
}
.one{
    background-color:#80ff00;
}
.two{
    background-color:#ff80ff;
}
.over{
    background-color:#ffff00;
}

第一种方式：

代码：

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DHTML技术演示---checkbox的使用2</title>
    <style type="text/css">
        @import url(table.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;x++ ){
                if(x%2==1){
                    collTrNodes[x].className="one";
                }else{
                    collTrNodes[x].className="two";
                }
                collTrNodes[x].onmouseover=function(){
                    name=this.className;
                    this.className="over";
                    /*下面这种注册事件的方式也可以
                    this.onmouseout=function(){
                        this.className=name;
                    }
                    */
                }
                collTrNodes[x].onmouseout=function(){
                    this.className=name;
                }
            }
        }
        onload = function(){
            trColor();
        }
        function checkAll(aChkboxNode){
            var collChkboxAllNodes = document.getElementsByName("all");
            //取消部分选中时的显示样式
            collChkboxAllNodes[0].indeterminate=false;
            collChkboxAllNodes[1].indeterminate=false;
            var collMailNodes = document.getElementsByName("mail");
            for(var x=0;x<collMailNodes.length;x++){
                collMailNodes[x].checked = aChkboxNode.checked;
            }
            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 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" onclick="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" onClick="checkAll(this)"/>全选</td>
                <td colspan="3">
                <!--colspan=3-表示这一列占3列 -->
                <input type="button" value="全选" onclick="checkAllByBtn1(true)">
                <input type="button" value="取消全选" onclick="checkAllByBtn1(false)">
                <input type="button" value="反选" onclick="checkAllByBtn2()">
                <input type="button" value="删除所选邮件" onClick="deleteMail()">
                </td>
            </tr>
        </table>
    </body>
</html>

第二中方式：把2个方法合并为一个方法：

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DHTML技术演示---checkbox的使用2</title>
    <style type="text/css">
        @import url(table.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;x++ ){
                if(x%2==1){
                    collTrNodes[x].className="one";
                }else{
                    collTrNodes[x].className="two";
                }
                collTrNodes[x].onmouseover=function(){
                    name=this.className;
                    this.className="over";
                    /*下面这种注册事件的方式也可以
                    this.onmouseout=function(){
                        this.className=name;
                    }
                    */
                }
                collTrNodes[x].onmouseout=function(){
                    this.className=name;
                }
            }
        }
        onload = function(){
            trColor();
        }
        function checkAll(aChkboxNode){
            var collChkboxAllNodes = document.getElementsByName("all");
            //取消部分选中时的显示样式
            collChkboxAllNodes[0].indeterminate=false;
            collChkboxAllNodes[1].indeterminate=false;
            var collMailNodes = document.getElementsByName("mail");
            for(var x=0;x<collMailNodes.length;x++){
                collMailNodes[x].checked = aChkboxNode.checked;
            }
            collChkboxAllNodes[0].checked = aChkboxNode.checked;
            collChkboxAllNodes[1].checked = aChkboxNode.checked;
        }
        //合并的方法：
        function checkAllByBtn(num){
            //获得邮件的所有多选框对象
            var collMailNodes = document.getElementsByName("mail");
            var collChkboxAllNodes = document.getElementsByName("all");//获得那2个全选的多选框
            //取消部分选中时的显示样式
            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" onclick="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" onClick="checkAll(this)"/>全选</td>
                <td colspan="3">
                <!--colspan=3-表示这一列占3列 -->
                 <input type="button" value="全选" onClick="checkAllByBtn(1)">
                 <input type="button" value="取消全选" onClick="checkAllByBtn(0)">
                 <input type="button" value="反选" onClick="checkAllByBtn(2)">
                 <input type="button" value="删除所选邮件" onClick="deleteMail()">
                </td>
            </tr>
        </table>
    </body>
</html>

360浏览器8.1演示结果：

image.png

image.png

image.png

文章标签：
JavaScript
前端开发
关键词：
网络技术
网络编程技术
javascript网络技术
JavaScript网络
JavaScript技术
谙忆
目录
相关文章
蓝易云
|
4月前
|
调度 Python
探索Python高级并发与网络编程技术。
可以看出，Python的高级并发和网络编程极具挑战，却也饱含乐趣。探索这些技术，你将会发现：它们好比是Python世界的海洋，有穿越风暴的波涛，也有寂静深海的奇妙。开始旅途，探索无尽可能吧！
蓝易云
100 15
Deephub
|
4月前
|
机器学习/深度学习 算法 PyTorch
Perforated Backpropagation：神经网络优化的创新技术及PyTorch使用指南
深度学习近年来在多个领域取得了显著进展，但其核心组件——人工神经元和反向传播算法自提出以来鲜有根本性突破。穿孔反向传播（Perforated Backpropagation）技术通过引入“树突”机制，模仿生物神经元的计算能力，实现了对传统神经元的增强。该技术利用基于协方差的损失函数训练树突节点，使其能够识别神经元分类中的异常模式，从而提升整体网络性能。实验表明，该方法不仅可提高模型精度（如BERT模型准确率提升3%-17%），还能实现高效模型压缩（参数减少44%而无性能损失）。这一革新为深度学习的基础构建模块带来了新的可能性，尤其适用于边缘设备和大规模模型优化场景。
Deephub
118 16
Perforated Backpropagation：神经网络优化的创新技术及PyTorch使用指南
陌陌谣
|
4月前
|
监控 算法 JavaScript
基于 JavaScript 图算法的局域网网络访问控制模型构建及局域网禁止上网软件的技术实现路径研究
本文探讨局域网网络访问控制软件的技术框架，将其核心功能映射为图论模型，通过节点与边表示终端设备及访问关系。以JavaScript实现DFS算法，模拟访问权限判断，优化动态策略更新与多层级访问控制。结合流量监控数据，提升网络安全响应能力，为企业自主研发提供理论支持，推动智能化演进，助力数字化管理。
陌陌谣
92 4
云故事栏目组2号
|
5月前
|
存储 双11 数据中心
数据中心网络关键技术，技术发明一等奖！
近日，阿里云联合清华大学与中国移动申报的“性能可预期的大规模数据中心网络关键技术与应用”项目荣获中国电子学会技术发明一等奖。该项目通过端网融合架构，实现数据中心网络性能的可预期性，在带宽保障、时延控制和故障恢复速度上取得重大突破，显著提升服务质量。成果已应用于阿里云多项产品及重大社会活动中，如巴黎奥运会直播、“双十一”购物节等，展现出国际领先水平。
云故事栏目组2号
188 18
蓝易云
|
5月前
|
安全 网络安全 定位技术
网络通讯技术：HTTP POST协议用于发送本地压缩数据到服务器的方案。
总的来说，无论你是一名网络开发者，还是普通的IT工作人员，理解并掌握POST方法的运用是非常有价值的。它就像一艘快速，稳定，安全的大船，始终为我们在网络海洋中的冒险提供了可靠的支持。
蓝易云
139 22
陌陌谣
|
5月前
|
存储 监控 算法
基于 Python 哈希表算法的局域网网络监控工具：实现高效数据管理的核心技术
在当下数字化办公的环境中，局域网网络监控工具已成为保障企业网络安全、确保其高效运行的核心手段。此类工具通过对网络数据的收集、分析与管理，赋予企业实时洞察网络活动的能力。而在其运行机制背后，数据结构与算法发挥着关键作用。本文聚焦于 PHP 语言中的哈希表算法，深入探究其在局域网网络监控工具中的应用方式及所具备的优势。
陌陌谣
132 7
游客mass6jalwg5qm
|
6月前
|
缓存 网络协议 API
掌握网络通信协议和技术：开发者指南
本文探讨了常见的网络通信协议和技术，如HTTP、SSE、GraphQL、TCP、WebSocket和Socket.IO，分析了它们的功能、优劣势及适用场景。开发者需根据应用需求选择合适的协议，以构建高效、可扩展的应用程序。同时，测试与调试工具（如Apipost）能助力开发者在不同网络环境下优化性能，提升用户体验。掌握这些协议是现代软件开发者的必备技能，对项目成功至关重要。
游客mass6jalwg5qm
173 11
陌陌谣
|
6月前
|
缓存 监控 算法
基于 C# 网络套接字算法的局域网实时监控技术探究
在数字化办公与网络安全需求增长的背景下，局域网实时监控成为企业管理和安全防护的关键。本文介绍C#网络套接字算法在局域网实时监控中的应用，涵盖套接字创建、绑定监听、连接建立和数据传输等操作，并通过代码示例展示其实现方式。服务端和客户端通过套接字进行屏幕截图等数据的实时传输，保障网络稳定与信息安全。同时，文章探讨了算法的优缺点及优化方向，如异步编程、数据压缩与缓存、错误处理与重传机制，以提升系统性能。
陌陌谣
109 2
weixin_836869520
|
网络协议 安全 Java
Java中的网络编程：Socket编程详解
Java中的网络编程：Socket编程详解
weixin_836869520
192 2

热门文章

最新文章

  • 1
    如何在网页播放英文的m3u8文件（基于Javascript搭建的在线网页工具）
  • 2
    基于ffmpeg+Javascript开发的m3u8转mp4视频转换器网页工具
  • 3
    JavaScript异步编程：从Promise到async/await
  • 4
    JavaScript中的箭头函数：简洁的语法与this绑定
  • 5
    JavaScript异步编程：Async/Await的优雅之道
  • 6
    JavaScript中的Async/Await：简化异步编程
  • 7
    JavaScript中的箭头函数：现代JS开发的必备特性
  • 8
    JavaScript中的箭头函数：简洁与this绑定
  • 9
    计算机网络及其安全组件纲要
  • 10
    干货分享“对接的 API 总是不稳定，网络分层模型” 看电商 API 故障的本质
  • 1
    16 Java网络编程（计算机网络+网络模型OSI/TCP/IP+通信协议等）
    178
  • 2
    （八）Java网络编程之IO模型篇-内核Select、Poll、Epoll多路复用函数源码深度历险！
    259
  • 3
    （七）Java网络编程-IO模型篇之从BIO、NIO、AIO到内核select、epoll剖析！
    368
  • 4
    （六）网络编程之化身一个请求感受浏览器输入URL后奇妙的网络之旅！
    290
  • 5
    （五）网络编程之流量接入层设计：基于性能怪兽从零构建日均亿级吞吐量的网关架构！
    196
  • 6
    （四）网络编程之请求分发篇：负载均衡静态调度算法、平滑轮询加权、一致性哈希、最小活跃数算法实践！
    273
  • 7
    （二）Java网络编程之爆肝HTTP、HTTPS、TLS协议及对称与非对称加密原理！
    237
  • 8
    （一）Java网络编程之计网基础、TCP-IP协议簇、TCP、UDP协议及腾讯QQ通信原理综述
    261
  • 9
    Python网络编程新纪元：urllib与requests库，让你的HTTP请求无所不能
    143
  • 10
    🔍HTTP协议不为人知的秘密：Python网络编程高手是如何炼成的？
    85

    • 相关课程

    更多
  • Python网络编程
  • JavaScript入门与实战
  • 企业上云攻略-阿里云网络产品应用系列教程
  • Linux网络进阶 - TCP/IP协议及OSI七层模型
  • JavaScript 自学手册文档教程
  • 网络管理者必知-2分钟了解新出台的《网络安全法》

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例
    • 下一篇
    阿里云OSS设置跨域访问