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>

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

时间： 2024-11-07 04:34:24

JavaScript---网络编程(10)--DHTML技术演示(3)-多选框的相关文章

JavaScript---网络编程(9-2)--DHTML技术演示(2-2)-表格加强

对上篇博客的最后那个表格隔行高亮显示加了个功能,鼠标监听和年龄从小到大排序. 演示代码: <html> <head> <title>DHTML技术演示---表格中页面中的显示操纵--行间隔高亮显示</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css&

JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式

一:用最底层的方式,该方式用来创建别的对象树也可以 代码演示: <html> <head> <title>DHTML技术演示---表格创建--用最底层的方式,其实该方式用来创建别的对象树也可以</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css&qu

JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件

本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个选项有不同的积分)积分的多少来给出评语 演示代码: <html> <head> <title>DHTML技术演示---radio的使用</title> <meta http-equiv="content-Type" content=&q

JavaScript---网络编程(8)-DHTML技术演示(1)

DHTML技术使用的基本思路: 1. 用标签封装数据-html范畴 2. 定义样式-css范畴 3. 明确事件源.事件和要处理的节点-dom范畴 4. 明确具体的操作方式,其实就是事件的处理内容(过程)-js范畴 新闻字体 第一种方式:html范畴 演示代码: <html> <head> <title>>DHTML技术演示---新闻字体1</title> <meta http-equiv="content-type" cont

Linux网络编程10&mdash;&mdash;使用UDP实现五子棋对战

思路 1. 通信 为了同步双方的棋盘,每当一方在棋盘上落子之后,都需要发送给对方一个msg消息,让对方知道落子位置.msg结构体如下: /* 用于发给对方的信息 */ typedef struct tag_msg { int msg_type; /* 悔棋? */ int msg_color; int msg_row; int msg_col; }MSG, *pMSG; 2. 悔棋 用链表头插法来模拟栈,链表记录了双方下子的轨迹.结构如下: /* 记录每一步的轨迹 */ typedef stru

Linux网络编程-IO复用技术

IO复用是Linux中的IO模型之一,IO复用就是进程预先告诉内核需要监视的IO条件,使得内核一旦发现进程指定的一个或多个IO条件就绪,就通过进程进程处理,从而不会在单个IO上阻塞了.Linux中,提供了select.poll.epoll三种接口函数来实现IO复用. 1.select函数 #include <sys/select.h> #include <sys/time.h> int select(int nfds, fd_set *readfds, fd_set *writef

Socket网络编程TCP、UDP演示样例

Socket网络编程: 1) OSI(了解): 国际标准化组织ISO(International Orgnization for Standardization)指定了网络通信的模型:开放系统互联(OSI,Open System Interconnection),把网络通信工作分为七层:物理层(最底层)-数据链路层-网络层-传输层-会话层-表示层-应用层(应用程序) 数据格式 功能与连接方式 典型设备 应用层 网络服务与使用者应用程序间的一个接口 表示层 数据表示.数据安全.数据压缩 会话层 建

java socket网络编程（多线程技术）

Client.java import java.io.*; import java.net.*; import java.util.*; public class Client { public static void main(String args[]) { Scanner scanner = new Scanner(System.in); Socket mysocket=null; DataInputStream in=null; DataOutputStream out=null; Th

第62节:探索Java中的网络编程技术

前言 感谢! 承蒙关照~ 探索Java中的网络编程技术 网络编程就是io技术和网络技术的结合,网络模型的定义,只要共用网络模型就可以两者连接.网络模型参考. 一座塔有七层,我们需要闯关. 第一层物理层->第二层数据链路层->第三层网络层->第四层传输层->第五层会话层->第六层表示层->第七层应用层. 物理层是主要定义物理设备标准,数据链路层是主要讲从物理层接收的数据进行MAC地址(网卡的地址)的封装与解封装.这层的数据较帧. 网络层是将从下层接收到的数据进行IP地址的