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. 【转】C# datagridview大小跟随窗口动态改变

    源地址:https://blog.csdn.net/fengxing11/article/details/52527715

  2. vs引入资源

    把资源放在程序目录中,然后点击显示所有文件,然后在资源上右键“包括在项目中”

  3. 数组常用的API——splice（）截取

    他的几个作用:截取  删除  增加  替换. 当传递一个参数的时候 : 截取开始的位置,参数代表下标,默人会截取到结束的位置. 当传递两个参数的时候: 第一个参数是删除的下标: 第二个参数代表删除几个 ...

  4. 我的csdn博客地址

    呆雁 持续的谦虚与努力 http://blog.csdn.net/u013539183

  5. ulimit -n 查看可以打开的最大文件描述符的数量

    具体ulimit命令参考 https://www.cnblogs.com/wangkangluo1/archive/2012/06/06/2537677.html

  6. ansible基本模块-server

    ansible   XXX   -m   service   -a  "name=XXX   state=started   enabled=yes"

  7. Mysql相关操作：

    允许root用户远程访问:https://www.cnblogs.com/davidgu/p/3706663.html; 用户的添加删除管理: https://www.cnblogs.com/hzd2 ...

  8. R语言排序函数汇总

    总结: 1.sort是直接对向量排序,返回原数值: 2.order先对数值排序,然后返回排序后各数值的索引: 3.rank返回原数据各项排名,有并列的情况: 4.arrange是dplyr包中的,可对 ...

  9. 关于Manjaro与Ubuntu双系统并存引发的一个boot问题

    事情发生在写下这篇博客的半小时前.笔者的电脑本身是Manjaro+win10双系统并存,因为一些原因要安装ubuntu. 装完ubuntu用了一阵子,想切回manjaro,于是遇到了这个问题. 看到k ...

  10. 链表 206 Reverse Linked List, 92,86, 328, 2, 445

    表不支持随机查找,通常是使用next指针进行操作. 206. 反转链表 /** * Definition for singly-linked list. * struct ListNode { * i ...