当前位置：移动技术网 > IT编程>开发语言>JavaScript > JavaScript---网络编程(10)--DHTML技术演示(3)-多选框

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

2017年12月21日 | 移动技术网IT编程 | 我要评论

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

checkbox的使用1：演示代码：

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>DHTML技术演示---checkbox的使用1</title>
    <script type="text/javascript">
        //html中<pre class="brush:java;"></pre>让代码原样输出-小提示
        function getSum(){
            var sum=0;
            var arrChkNode = document.getElementsByName("item");
            for(var x=0;xaaa</font>" ;="" function="" checkall(achkallnode){="" arrchknodes="document.getElementsByName("item");" for(var="" x="0;x
 
     
        <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>
     
 
</arrchknode.length;x++){>

浏览器81-演示结果">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;
}

第一种方式：
代码：

   <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].onmouseover="function(){" name="this.className;" this.classname="over" *下面这种注册事件的方式也可以="" this.onmouseout="function(){" *="" colltrnodes[x].onmouseout="function(){" onload="function(){" trcolor();="" function="" checkall(achkboxnode){="" var="" collchkboxallnodes="document.getElementsByName("all");" 取消部分选中时的显示样式="" collchkboxallnodes[0].indeterminate="false;" collchkboxallnodes[1].indeterminate="false;" 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;" 合并的方法：="" checkallbybtn(num){="" 获得邮件的所有多选框对象="" n="0;" 遍历所有的邮件多选框="" 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="">
 
     
        <h2>邮件列表</h2>
        <table id="mailTable">
            <tbody><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>
 
 
        </tbody></table>
 
     
 
</collmailchknodes.length;x++){></colltrnodes.length;x++>

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

   <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].onmouseover="function(){" name="this.className;" this.classname="over" *下面这种注册事件的方式也可以="" this.onmouseout="function(){" *="" colltrnodes[x].onmouseout="function(){" onload="function(){" trcolor();="" function="" checkall(achkboxnode){="" var="" collchkboxallnodes="document.getElementsByName("all");" 取消部分选中时的显示样式="" collchkboxallnodes[0].indeterminate="false;" collchkboxallnodes[1].indeterminate="false;" 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;" 合并的方法：="" checkallbybtn(num){="" 获得邮件的所有多选框对象="" n="0;" 遍历所有的邮件多选框="" 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="">
 
     
        <h2>邮件列表</h2>
        <table id="mailTable">
            <tbody><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>
 
 
        </tbody></table>
 
     
 
</collmailchknodes.length;x++){></colltrnodes.length;x++>

360浏览器8.1演示结果：

@import url(table.css); @import url(table.css);

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

原生js写简单的打地鼠游戏

原生js写简单的打地鼠游戏周末放假了刚睡觉起来，有个童鞋问我原生写地鼠游戏难不难？回答：“你理清打地鼠游戏的逻辑... [阅读全文]
打脸一下，js创建二维数组的错误示范

最近在力扣上刷动态规划的题，常常需要创建一个二维数组。起初楼主使用如下代码创建了一个二维数组，自以为简单方便的。... [阅读全文]
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（一）

前几天看了慕课里的制作2048小游戏课程->>> 指路：https://www.imooc.c... [阅读全文]
Cocos Creator 热更新工具BUG:重启游戏后热更新无效！（已解决）

Cocos Creator 热更新BUG:重启后游戏后热更新无效！（已解决）问题：在Cocos Creator ... [阅读全文]
天猫店群操作，实操细节注意事项，纯干货！

天猫店群操作，实操细节注意事项，纯干货！大家好，我是电商火火，团队自运营两百家天猫店。做店群的基本上都知道淘宝京... [阅读全文]
OpenGL入门详解(3.OpenGL基本流程)

看了不少的OpenGL书或者文章，有如下特征上来就是一堆代码，看的莫名其妙；上来就是很片面的介绍概念，看了也不知... [阅读全文]
甜品消消乐 02 甜品的类型枚举、结构体、字典的创建

甜品的类型枚举，结构体，字典的创建（1）枚举类型。// 甜品对象的种类把道具相关用枚举的方式写出来 pub... [阅读全文]
js中全选和全不选

<!DOCTYPE html><html lang="en"><head> ... [阅读全文]
使用无序列表ul实现多级菜单

首先要求后端传来的菜单数据必须包含：id---菜单idpid---父菜单id整体思想：首先渲染出整个菜单（不包含... [阅读全文]
Unity本地Json文件的创建、编辑和读取

文章目录（一）建本地Json文件（二）读取（三）注意（一）建本地Json文件Unity不能创建Json文件，导入... [阅读全文]

网友评论


验证码：

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

2017年12月21日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论