1.两个select 内容互换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        #s1,#s2{
            width: 300px;
        }
    </style>
    <body>
        <select size="7" id="s1">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
           <option value="4">4</option>
           <option value="5">5</option>
        </select>
        <input type="button" id="b1" value="向左 " />
        <input type="button" id="b2" value="向右"  />
        <input type="button" id = "b3" value="全选" />
        <select size="7" id="s2">
        <option value="a">a</option>
        <option value="b">b</option>    
        <option value="c">c</option>    
        <option value="d">d</option>    
        <option value="e">e</option>    
        </select>
    </body>
</html>
<!--select互换-->
<script>
    var s1 = document.getElementById("s1")
    var s2 = document.getElementById("s2")
    var b1 = document.getElementById("b1")
    var b2 = document.getElementById("b2")
    var b3 = document.getElementById("b3")
    b1.onclick = function(){
        s1.innerHTML += "<option>"+s2.value+"</option>"
        s2.value = ""
    }
    b2.onclick = function(){
        s2.innerHTML += "<option>"+s1.value+"</option>"
        s1.value = ""
    }
    b3.onclick = function(){
        
    }
    
</script>

2.单选按钮  同意可点击下一步

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="radio"  id = "b1" />
        <input type="button" id="b2" value="下一步"  disabled="disabled"/>
    </body>
</html>
<script>
//    单选按钮
    var b1 = document.getElementById("b1");
    var b2 = document.getElementById("b2");
    b1.onclick = function(){
        if(b1.checked){
            b2.removeAttribute("disabled");
        }else{
            b2.setAttribute("disabled","disabled")
        }
    }
</script>

3.全选框

<!DOCTYPE html>
<html>

<head>
        <meta charset="UTF-8">
        <title></title>
    </head>

<body>
        全选:<input type="button" id="b1" value="全选" /> 不选:
        <input type="button" id="b2" value="全不选" /> 反选:
        <input type="button" id="b3" value="反选" />
        <div id="div">
            <input type="checkbox" />
            <input type="checkbox" />
            <input type="checkbox" />
            <input type="checkbox" />
            <input type="checkbox" />
        </div>
    </body>

</html>
<script>
    window.onload = function() {
        var b1 = document.getElementById("b1")
        var b2 = document.getElementById("b2")
        var b3 = document.getElementById("b3")
        var div = document.getElementById("div")
        var inp = div.getElementsByTagName("input")
        b1.onclick = function() {
            for(a = 0; a < inp.length; a++) {
                
                inp[a].checked = true;
            }
        }
        b2.onclick = function() {
            for(a = 0; a < inp.length; a++) {
                inp[a].checked = false;
            };
        };
        b3.onclick = function() {
            for(a = 0; a < inp.length; a++) {
                if(inp[a].checked == true) {
                    inp[a].checked = false;
                } else {
                    inp[a].checked = true;
                }
            };
        };
    };
</script>

2017 年 9 月 27 日 js(1.两个select 内容互换 2.单选按钮 同意可点击下一步 3. 全选框)的更多相关文章

  1. 2017 年 9 月 27 日 js(文本框内容添加到select)

    写法 <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">   ...

  2. 2017年12月24日 JS跟Jquery基础

    js基础 alert();confirm(); 基础语法:与C#一致数据类型及类型转换var (string,decimal)parseInt()parseFloat();isNaN(); 运算符:数 ...

  3. 2017年2月27日Unicorn,　US (148) and China (69), followed by the U.K. (10), India (9), Israel (5) and Germany (5).

    Revisiting The Unicorn Club Get to know the newest crowd of billion dollar startups In 2013, when Ai ...

  4. 2017年11月27日 C#MDI窗体创建&记事本打印&记事本查找、自动换行

    MDI窗体第一个父窗体 把属性里的IsMdiContainer设置为true就可以了 父窗体连接子窗体 //创建一个新的类,用来连接别的窗体,并且别的窗体为唯一窗体 List<Form> ...

  5. 2017年1月1日 星期日 --出埃及记 Exodus 21:27

    2017年1月1日 星期日 --出埃及记 Exodus 21:27 And if he knocks out the tooth of a manservant or maidservant, he ...

  6. 导航狗IT周报-2018年05月27日

    原文链接:https://www.daohanggou.cn/2018/05/27/it-weekly-9/ 摘要: “灰袍技能圈子”将闭圈:物理安全:为什么我们现在的生活节奏越来越快? 技术干货 1 ...

  7. 免费公共DNS服务器IP地址大全（2017年6月24日）

    收集全球各个常用公共DNS服务器 IP地址,欢迎各位朋友评论补充! 国内常用公共DNS 114 DNS: (114.114.114.114:    114.114.115.115) 114DNS安全版 ...

  8. 猖獗的假新闻：2017年1月1日起iOS的APP必须使用HTTPS

    一.假新闻如此猖獗 刚才一位老同事 打电话问:我们公司还是用的HTTP,马上就到2017年了,提交AppStore会被拒绝,怎么办? 公司里已经有很多人问过这个问题,回答一下: HTTP还是可以正常提 ...

  9. 腾讯QQ认证空间4月27日已全面开放申请，欲进军自媒体

    今天看到卢松松的博客上爆出,腾讯QQ认证空间4月27日已全面开放申请的消息,这一消息出来, 马浩周根据提示方法进行申请,下面先说说腾讯QQ认证空间的申请方法: QQ认证空间开放申请公告地址:http: ...

随机推荐

  1. DOS远程桌面连接命令[佚名]

    DOS远程桌面连接命令 mstsc /v: 192.168.1.250 /console cmd 运行 command 删除文件 rd 文件名/S 创建文件 MD 文件名 net user admin ...

  2. Spring IOC容器交给application域对象管理

    在项目开发中,我们不能在每次使用IOC容器时,都创建一个ApplicationContext对象, 因此我们将IOC容器交给application域对象管理,application对象在服务器启动时创 ...

  3. ubuntu17安装以及相关问题的解决

    .ssh的安装和配置 sudo apt-get update sudo apt-get install openssh-server 查看ssh服务是否启动 打开"终端窗口",输入 ...

  4. underscore里面的debounce与throttle

    throttle 策略的电梯.保证如果电梯第一个人进来后,15秒后准时运送一次,不等待.如果没有人,则待机. debounce 策略的电梯.如果电梯里有人进来,等待15秒.如果又人进来,15秒等待重新 ...

  5. 帝国cms刷新内容页提示.phome_ecms_news_data_' doesn't exist

    帝国cms后台刷新提示.phome_ecms_news_data_' doesn't exist解决方法: 刷新所有信息内容页面时提示“Table '*.phome_ecms_article_data ...

  6. 品味Zookeeper之选举及数据一致性_3

    品味Zookeeper之选举及数据一致性 本文思维导图 前言 为了高可用和数据安全起见,zk集群一般都是由几个节点构成(由n/2+1,投票机制决定,肯定是奇数个节点).多节点证明它们之间肯定会有数据的 ...

  7. php代码书写习惯优化小结

    (1)使用 static 静态方法比普通方法快4倍(2)echo输出快于print(3)连接字符使用 , 代替 .(4)循环之前先取出最大值,而不是在循环里面取值    正确的方法      $max ...

  8. 2、开始学习C++

    1.创建C++程序 C++程序是严格区分大小写,Cout与COUT都是识别不出来的,下面给出了一段简单的C++程序. #include "stdafx.h" #include &l ...

  9. Qt 学习之路 2（67）：访问网络（3）

    Qt 学习之路 2(67):访问网络(3) 豆子 2013年11月5日 Qt 学习之路 2 16条评论 上一章我们了解了如何使用我们设计的NetWorker类实现我们所需要的网络操作.本章我们将继续完 ...

  10. 老男孩python作业5-开发一个简单的python计算器

    开发一个简单的python计算器 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568 ...