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. 中国移动MIFI--CM510，4G TD-LTE MIFI 上网终端开箱及初步体验@上海

    上海的,前期在4G官网报名专页登记了http://www.10086.cn/lte/recruit.html 当时由于报名结束了,所以先注册登记了信息. 1.15号中午收到10086的短信邀请,立马报 ...

  2. 题解 P2613 【【模板】有理数取余】

    题目链接 我们先看这个式子: $c=\dfrac{a}{b}$ $ $ $ $ $mod$ $ $ $ $ $19260817$ 某正常高中生:这$……$ --- 对于这个 $c$ . 显然,它很可能 ...

  3. 解决 Github用户名 变为 invalid-email-address 问题

    解决 Github用户名 变为 invalid-email-address 问题 If the identity used for this commit is wrong, you can fix ...

  4. JDBC_事务概念_ACID特点_隔离级别_提交commit_回滚rollback

    事务的概念 一组要么同时执行成功,要么同时执行失败的SQL语句,是数据库操作的一个执行单元! 事务开始于: 连接到数据库上,并执行一条DML语句(insert,update或delete),前一个事务 ...

  5. 6. 重点来啦，pytest的各种装饰圈fixtures

    pytest中,fixture的目的是什么 为可靠的和可重复执行的测试提供固定的基线.(可以理解为测试的固定配置,使不同范围的测试都能够获得统一的配置.) fixture提供了区别于传统单元测试(se ...

  6. Sql server 千万级大数据SQL查询优化的几点建议

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  7. (C/C++) Link List - C++ 版本

    利用C++寫一個基本的 Link list 練習,功能包含 pint list.CreatList.Insert.Delete.Reverse.Search.Clear.GetLen. 先建立相關的C ...

  8. CentOS 中安装nginx

    Centos6.8 yum  安装 nginx  1:使用yum安装nginx,安装nginx库 [root@hadoop110 //]# rpm -Uvh http://nginx.org/pack ...

  9. Qt 学习之路 2（74）：线程和 QObject

    Home / Qt 学习之路 2 / Qt 学习之路 2(74):线程和 QObject Qt 学习之路 2(74):线程和 QObject  豆子  2013年12月3日  Qt 学习之路 2  2 ...

  10. mysql 查询库中有几张表

    SELECT COUNT(*) TABLES, table_schemaFROM information_schema.TABLESWHERE table_schema = '999*999' 999 ...