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

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

2022-04-14 93
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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多选框
谙忆
目录
相关文章
陌陌谣
|
23天前
|
存储 监控 安全
单位网络监控软件：Java 技术驱动的高效网络监管体系构建
在数字化办公时代，构建基于Java技术的单位网络监控软件至关重要。该软件能精准监管单位网络活动，保障信息安全，提升工作效率。通过网络流量监测、访问控制及连接状态监控等模块，实现高效网络监管，确保网络稳定、安全、高效运行。
陌陌谣
47 11
站大爷
|
9天前
|
负载均衡 网络协议 网络性能优化
动态IP代理技术详解及网络性能优化
动态IP代理技术通过灵活更换IP地址，广泛应用于数据采集、网络安全测试等领域。本文详细解析其工作原理，涵盖HTTP、SOCKS代理及代理池的实现方法，并提供代码示例。同时探讨配置动态代理IP后如何通过智能调度、负载均衡、优化协议选择等方式提升网络性能，确保高效稳定的网络访问。
站大爷
63 2
土木林森
|
2月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术，以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术，以其高效、灵活著称。本文将介绍 Node.js 的基础概念，包括事件驱动、单线程模型和模块系统；探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信；分析项目结构与开发流程，讨论其优势与挑战，并通过案例展示 Node.js 在实际项目中的应用，旨在帮助开发者更好地掌握这一强大工具。
土木林森
53 1
bruce_xiaowei
|
15天前
|
机器学习/深度学习 安全 网络安全
网络安全词云图与技术浅谈
### 网络安全词云图与技术浅谈 本文介绍了通过词云图展示网络安全关键术语的方法，并探讨了构建现代网络安全体系的关键要素。词云图利用字体大小和颜色突出高频词汇，如恶意软件、防火墙、入侵检测系统等。文中提供了生成词云图的Python代码示例，包括安装依赖库和调整参数。此外，文章详细讨论了恶意软件防护、加密技术、身份验证、DDoS防御、社会工程学防范及威胁情报等核心技术，强调了多层次、多维度的安全策略的重要性。
bruce_xiaowei
54 11
网络安全词云图与技术浅谈
shuj
|
1月前
|
存储 安全 网络安全
云计算与网络安全：技术融合的双刃剑
在数字化浪潮中，云计算如同一股不可阻挡的力量，推动着企业和个人用户步入一个高效、便捷的新时代。然而，随之而来的网络安全问题也如影随形，成为制约云计算发展的阿喀琉斯之踵。本文将探讨云计算服务中的网络安全挑战，揭示信息保护的重要性，并提供实用的安全策略，旨在为读者呈现一场技术与安全的较量，同时指出如何在享受云服务带来的便利的同时，确保数据的安全和隐私。
shuj
28 6
sunrr
|
2月前
|
供应链 安全 物联网安全
NIST（美国国家标准与技术研究院）在网络安全领域进行了多项创新
NIST（美国国家标准与技术研究院）在网络安全领域进行了多项创新
sunrr
53 10
请看我回答~
|
1月前
|
存储 人工智能 安全
云计算与网络安全：技术融合与挑战
在数字化时代的浪潮中，云计算和网络安全已成为推动社会进步的两大关键技术。本文将探讨云计算服务的发展，网络安全的重要性，以及信息安全技术的演进。我们将通过实例分析，揭示云服务如何增强数据保护，网络安全措施如何应对新兴威胁，以及信息安全技术的创新如何为企业带来竞争优势。文章旨在为读者提供对云计算和网络安全领域的深入理解，并展示它们如何共同塑造我们的未来。
请看我回答~
42 4
肥猪肥猪-17824
|
1月前
|
监控 安全 网络安全
云计算与网络安全：技术挑战与解决方案
随着云计算技术的飞速发展，其在各行各业的应用越来越广泛。然而，随之而来的网络安全问题也日益凸显。本文将从云服务、网络安全和信息安全等技术领域出发，探讨云计算面临的安全挑战及相应的解决方案。通过实例分析和代码示例，旨在帮助读者更好地理解云计算与网络安全的关系，提高网络安全防护意识。
肥猪肥猪-17824
61 2
游客qf4jmczx4xu2y
|
1月前
|
存储 监控 安全
云计算与网络安全：云服务、网络安全、信息安全等技术领域的融合与挑战
本文将探讨云计算与网络安全之间的关系，以及它们在云服务、网络安全和信息安全等技术领域中的融合与挑战。我们将分析云计算的优势和风险，以及如何通过网络安全措施来保护数据和应用程序。我们还将讨论如何确保云服务的可用性和可靠性，以及如何处理网络攻击和数据泄露等问题。最后，我们将提供一些关于如何在云计算环境中实现网络安全的建议和最佳实践。
游客qf4jmczx4xu2y
64 4
mrq4nk6ni2neg
|
1月前
|
存储 安全 网络安全
云计算与网络安全：云服务、网络安全、信息安全等技术领域的融合与挑战
随着云计算技术的飞速发展，越来越多的企业和个人开始使用云服务。然而，云计算的广泛应用也带来了一系列网络安全问题。本文将从云服务、网络安全、信息安全等方面探讨云计算与网络安全的关系，分析当前面临的挑战，并提出相应的解决方案。
mrq4nk6ni2neg
66 3

热门文章

最新文章

  • 1
    构建云上安全共同体 | 阿里云亮相2024年（第十三届）电信和互联网行业网络安全年会
  • 2
    针对MaxCompute经典网络域名下线，Dataphin应对策略的公告
  • 3
    网络诊断必备：Ping、Traceroute、Wireshark的实用技巧详解
  • 4
    猫狗宠物识别系统Python+TensorFlow+人工智能+深度学习+卷积网络算法
  • 5
    深入解析图神经网络：Graph Transformer的算法基础与工程实践
  • 6
    【宠物识别系统】Python+卷积神经网络算法+深度学习+人工智能+TensorFlow+图像识别
  • 7
    网络诊断指南：网络故障排查步骤与技巧
  • 8
    《docker高级篇（大厂进阶）：4.Docker网络》包括：是什么、常用基本命令、能干嘛、网络模式、docker平台架构图解
  • 9
    基于改进遗传优化的BP神经网络金融序列预测算法matlab仿真
  • 10
    阿里云DTS踩坑经验分享系列｜使用VPC数据通道解决网络冲突问题
  • 1
    Linux网络编程 网络基础知识
    78
  • 2
    网络编程知识点总结（7）
    59
  • 3
    网络编程知识点总结（6）
    57
  • 4
    网络编程知识点总结（5）
    54
  • 5
    网络编程知识点总结（4）
    48
  • 6
    网络编程知识点总结（3）
    55
  • 7
    网络编程知识点总结（2）
    52
  • 8
    网络编程知识点总结(1)
    52
  • 9
    【Java网络编程】网络编程概述、UDP通信（DatagramPacket 与 DatagramSocket）
    95
  • 10
    【网络编程】理解客户端和服务器并使用Java提供的api实现回显服务器
    62

    • 相关课程

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

    • 相关电子书

    更多
  • Session：更加安全、可靠的数据中心网络产品更新
  • Session：极简易用的全球化网络产品更新
  • Session：弹性、高可用、可观测的应用交付网络产品更新

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • CSS基础教程
  • 容器的网络入门
  • 容器的自定义网络
  • 容器的共享网络模型
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅