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

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

2022-04-14 77
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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多选框
谙忆
目录
相关文章
肥猪肥猪-17824
|
5天前
|
存储 安全 网络安全
云计算与网络安全：技术融合的未来之路
【10月更文挑战第30天】在数字化浪潮的推动下，云计算已成为企业信息技术架构的核心。然而，随之而来的网络安全问题也日益凸显。本文将探讨云计算与网络安全的关系，分析云服务中的安全挑战，并提出相应的解决方案。我们将通过实例展示如何在云计算环境中实现网络安全的最佳实践，以期为读者提供一条技术融合的未来之路。
肥猪肥猪-17824
26 7
我不是游客20240119
|
1天前
|
存储 安全 网络安全
云计算与网络安全：云服务、网络安全、信息安全等技术领域的深度剖析
【10月更文挑战第34天】本文将深入探讨云计算与网络安全的关系，包括云服务、网络安全、信息安全等技术领域。我们将通过实例和代码示例，解析云计算如何改变网络安全的格局，以及如何在云计算环境下保护信息安全。我们将从云计算的基本概念开始，然后深入到网络安全和信息安全的主题，最后通过代码示例来展示如何在云计算环境下实现网络安全和信息安全。
我不是游客20240119
8 1
一位隐者
|
2天前
|
供应链 安全 网络安全
区块链技术与网络安全：机遇与挑战
区块链技术与网络安全：机遇与挑战
一位隐者
14 2
跃@sir
|
3天前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些其他应用
HTML5与神经网络技术的结合有哪些其他应用
跃@sir
15 3
肥猪肥猪-17824
|
6天前
|
存储 安全 网络安全
云计算与网络安全：技术融合的双刃剑
【10月更文挑战第28天】本文旨在探索云计算在提供便利和效率的同时，如何成为网络安全领域的一大挑战。我们将从云服务的基本架构出发，分析其在信息安全中的关键作用，进而讨论当前网络安全面临的主要威胁及防御策略。文章还将探讨云计算环境中的数据保护、身份验证和访问控制机制，以及如何通过加密技术和安全协议来增强安全性。最后，我们将展望未来云计算与网络安全的发展趋势，并思考如何平衡技术创新与安全需求。
肥猪肥猪-17824
27 7
跃@sir
|
3天前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些
HTML5与神经网络技术的结合有哪些
跃@sir
14 2
shuj
|
4天前
|
存储 安全 网络安全
云计算与网络安全：技术融合的新篇章
【10月更文挑战第31天】本文将深入探讨云计算与网络安全之间的紧密联系，揭示云服务在信息安全领域的关键作用。文章将通过分析网络安全的挑战、云服务的机遇以及信息安全的未来趋势，为读者提供一个全面的视角。同时，文章还将展示如何通过实际的技术手段和策略来增强云计算环境下的安全性。
shuj
12 1
进步`于辰
|
4天前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块，包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念，还推荐了相关博文供深入学习。特别强调了express模块的使用，包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案，并总结了一些通用设置。适合Node.js初学者参考学习。
进步`于辰
16 1
肥猪肥猪-17824
|
6天前
|
存储 安全 网络安全
云计算与网络安全：探索云服务中的信息安全技术
【10月更文挑战第29天】在数字化时代的浪潮中，云计算作为一种革命性的技术，正日益成为企业和个人数据存储与处理的首选方案。然而，随之而来的网络安全问题也愈发复杂和严峻。本文将深入探讨云计算服务中的网络安全挑战，并分析如何通过先进的信息安全技术来加强保护措施。我们将从云服务的基础知识出发，逐步深入到网络安全的各个方面，包括数据加密、身份验证、访问控制等关键技术的应用。通过理论与实践的结合，旨在为读者提供一套全面而实用的云计算安全指南。
肥猪肥猪-17824
20 1
一位隐者
|
9天前
|
运维 安全 5G
5G网络切片技术：定制化服务的实现路径
【10月更文挑战第25天】
一位隐者
59 3

热门文章

最新文章

  • 1
    Java网络编程从入门到精通（33）：非阻塞I/O的缓冲区（Buffer）
  • 2
    Java网络编程：实现HTTP模拟器
  • 3
    Windows Phone 7 网络编程之RSS阅读器
  • 4
    Java网络编程总结 --URLConnection
  • 5
    Java网络编程从入门到精通（29）：服务端Socket的选项
  • 6
    Linux网络编程之原始套接字-ping协议实现
  • 7
    Python网络编程 - 一个简单的客户端Get请求程序
  • 8
    GO语言练习：网络编程 TCP 示例
  • 9
    linux网络编程----->线程同步-->信号量
  • 10
    android网络编程——HttpGet、HttpPost比较
  • 1
    `nmap`是一个开源的网络扫描工具，用于发现网络上的设备和服务。Python的`python-nmap`库允许我们在Python脚本中直接使用`nmap`的功能。
    139
  • 2
    图神经网络是一类用于处理图结构数据的神经网络。与传统的深度学习模型（如卷积神经网络CNN和循环神经网络RNN）不同，
    74
  • 3
    生成对抗网络（GAN）由两部分组成：生成器（Generator）和判别器（Discriminator）。
    343
  • 4
    Keras是一个高层神经网络API，由Python编写，并能够在TensorFlow、Theano或CNTK之上运行。Keras的设计初衷是支持快速实验，能够用最少的代码实现想法，并且能够方便地在CPU和GPU上运行。
    61
  • 5
    我们将使用Python的内置库`http.server`来创建一个简单的Web服务器。虽然这个示例相对简单，但我们可以围绕它展开许多讨论，包括HTTP协议、网络编程、异常处理、多线程等。
    78
  • 6
    在Python中，我们使用`socket`模块来进行网络通信。首先，我们需要导入这个模块。
    28
  • 7
    一文带你了解网络交换机的演进和未来，网络工程师收藏！
    235
  • 8
    循环神经网络简介
    47
  • 9
    一次读懂网络分层：应用层到物理层全解析
    333
  • 10
    云计算环境下的网络安全挑战与对策
    52

    • 相关课程

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

    • 相关电子书

    更多
  • JavaScript函数
  • JavaScript异步编程
  • Delivering Javascript to World

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • HTML及前端框架
  • 容器的网络入门
  • 容器的自定义网络
  • 容器的共享网络模型
    • 下一篇
    DataWorks售前咨询