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

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

2016-06-21 987
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这节讲述多选框的使用，当然，肯定是结合css和Javascript一起的。checkbox的使用1：演示代码： DHTML技术演示---checkbox的使用1 //html中让代码原样输出-小提示...

这节讲述多选框的使用，当然，肯定是结合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>

360浏览器8.1 演示结果:

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演示结果：

文章标签：
JavaScript
前端开发
容器
API
关键词：
JavaScript技术
网络技术
网络编程技术
JavaScript网络
javascript网络技术
谙忆
目录
相关文章
我们是幸福一家人
|
4月前
|
前端开发 JavaScript 开发者
JavaScript：构建动态网络的引擎
JavaScript：构建动态网络的引擎
我们是幸福一家人
252 101
varin
|
4月前
|
JavaScript 前端开发 IDE
TypeScript vs. JavaScript：技术对比与核心差异解析
TypeScript 作为 JavaScript 的超集，通过静态类型系统、编译时错误检测和强大的工具链支持，显著提升代码质量与可维护性，尤其适用于中大型项目和团队协作。相较之下，JavaScript 更灵活，适合快速原型开发。本文从类型系统、错误检测、工具支持等多维度对比两者差异，并提供技术选型建议，助力开发者合理选择。
varin
999 1
蓝易云
|
4月前
|
监控 JavaScript 前端开发
JavaScript加密与解密技术：Hook技术应用案例分析
以上案例展示了如何利用JavaScript Hook技术结合强大且广泛采纳标准化算法（如AES），无缝地集成进Web应用程序以增强通信安全性。此种方法不仅能够确保敏感信息得到有效保护，并且由于它们操作适度透明、无需重构已存在代码基础架构而具备较高实际可行性及易操作性。
蓝易云
243 11
土木林森
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术，以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术，以其高效、灵活著称。本文将介绍 Node.js 的基础概念，包括事件驱动、单线程模型和模块系统；探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信；分析项目结构与开发流程，讨论其优势与挑战，并通过案例展示 Node.js 在实际项目中的应用，旨在帮助开发者更好地掌握这一强大工具。
土木林森
460 1
陌陌谣
|
8月前
|
监控 算法 JavaScript
基于 JavaScript 图算法的局域网网络访问控制模型构建及局域网禁止上网软件的技术实现路径研究
本文探讨局域网网络访问控制软件的技术框架，将其核心功能映射为图论模型，通过节点与边表示终端设备及访问关系。以JavaScript实现DFS算法，模拟访问权限判断，优化动态策略更新与多层级访问控制。结合流量监控数据，提升网络安全响应能力，为企业自主研发提供理论支持，推动智能化演进，助力数字化管理。
陌陌谣
215 4
卓伊凡
|
11月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术，看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载（简单）-ios苹果plist下载（稍微麻烦一丢丢）-优雅草卓伊凡
【02】仿站技术之python技术，看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载（简单）-ios苹果plist下载（稍微麻烦一丢丢）-优雅草卓伊凡
卓伊凡
530 7
【02】仿站技术之python技术，看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载（简单）-ios苹果plist下载（稍微麻烦一丢丢）-优雅草卓伊凡
陌陌谣
|
10月前
|
监控 算法 JavaScript
企业用网络监控软件中的 Node.js 深度优先搜索算法剖析
在数字化办公盛行的当下，企业对网络监控的需求呈显著增长态势。企业级网络监控软件作为维护网络安全、提高办公效率的关键工具，其重要性不言而喻。此类软件需要高效处理复杂的网络拓扑结构与海量网络数据，而算法与数据结构则构成了其核心支撑。本文将深入剖析深度优先搜索（DFS）算法在企业级网络监控软件中的应用，并通过 Node.js 代码示例进行详细阐释。
陌陌谣
212 2
游客lijmi4663rgsa
|
10月前
|
JavaScript 算法 前端开发
JS数组操作方法全景图，全网最全构建完整知识网络！js数组操作方法全集（实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解，附大量源码和易错点解析）
这些方法提供了对数组的全面操作，包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆，并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用，方便您理解数组操作的底层原理。链式调用的几个案例，让您玩转数组操作。 只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
389 2
陌陌谣
|
11月前
|
监控 网络协议 算法
基于问题“如何监控局域网内的电脑”——Node.js 的 ARP 扫描算法实现局域网内计算机监控的技术探究
在网络管理与安全领域，监控局域网内计算机至关重要。本文探讨基于Node.js的ARP扫描算法，通过获取IP和MAC地址实现有效监控。使用`arp`库安装（`npm install arp`）并编写代码，可定期扫描并对比设备列表，判断设备上线和下线状态。此技术适用于企业网络管理和家庭网络安全防护，未来有望进一步提升效率与准确性。
陌陌谣
434 8
陌陌谣
|
存储 监控 算法
局域网网络管控里 Node.js 红黑树算法的绝妙运用
在数字化办公中，局域网网络管控至关重要。红黑树作为一种自平衡二叉搜索树，凭借其高效的数据管理和平衡机制，在局域网设备状态管理中大放异彩。通过Node.js实现红黑树算法，可快速插入、查找和更新设备信息（如IP地址、带宽等），确保网络管理员实时监控和优化网络资源，提升局域网的稳定性和安全性。未来，随着技术融合，红黑树将在网络管控中持续进化，助力构建高效、安全的局域网络生态。
陌陌谣
211 9

热门文章

最新文章

  • 1
    六种常用的网络流量特征提取工具
  • 2
    让每个进程不同外网 IP，实现局部单窗口单 IP，驱动级网络加速器原理！
  • 3
    回归预测 | MATLAB实现DNN全连接神经网络多输入多输出
  • 4
    全栈必备 网络编程基础
  • 5
    机器学习算法之——卷积神经网络(CNN)原理讲解
  • 6
    带来扩展和不变性的交易网络，IBM前高管认为区块链会改变世界
  • 7
    用进化的观点学习网络协议
  • 8
    网络入侵的常用方法
  • 9
    tcp/ip网络中端口的选定
  • 10
    【网络安全】护网系列-护网安全设备
  • 1
    【Java】（10）进程与线程的关系、Tread类；讲解基本线程安全、网络编程内容；JSON序列化与反序列化
    238
  • 2
    【Java基础】（1）进程与线程的关系、Tread类；讲解基本线程安全、网络编程内容；JSON序列化与反序列化
    256
  • 3
    WebSocket网络编程深度实践：从协议原理到生产级应用
    386
  • 4
    Netty 高性能网络编程框架技术详解与实践指南
    315
  • 5
    Go语言网络编程：使用 net/http 构建 RESTful API
    282
  • 6
    Go 网络编程：HTTP服务与客户端开发
    418
  • 7
    Go网络编程：基于TCP的网络服务端与客户端
    260
  • 8
    探索Python高级并发与网络编程技术。
    226
  • 9
    Cpp网络编程Winsock API
    481
  • 10
    Java网络编程，多线程，IO流综合小项目一一ChatBoxes
    475

    • 相关课程

    更多
  • TCP/IP 网络基础
  • 云计算工程师解析与实战-网络专家篇（体验版）
  • 云网络白皮书-阿里云网络系列课
  • JavaScript入门与实战
  • 企业上云攻略-阿里云网络产品应用系列教程
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例
    • 下一篇
    附部署代码｜云数据库RDS 全托管 Supabase服务：小白轻松搞定开发AI应用