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. MVC进阶篇（三）——model层数据验证

    前言 常常在想,姓名性别那些个验证,真的有必要每次遇到,每次写验证吗?好麻烦,于是学到MVC这里,发现MVC自带数据验证,这个东西着实是个好东西.我写了一个小demo,分享给大家. 内容 一个表单的提 ...

  2. kali linux之webshell

    webacoo(web backdoor cookie) 类终端的shell 编码通信内容通过cookie头传输,隐蔽性较强 cm:base64编码的命令 cn:服务器用于返回数据的cookie头的名 ...

  3. 转载 Adobe DreamweaverCS6安装及破解

    一:安装 百度链接:链接:http://pan.baidu.com/s/1dF8hTex 密码:zrew   (重点) 1) Adobe DreamweaverCS6中文版下载 2)Adobe Dre ...

  4. C++中 栈和队列的使用方法

    C++中 栈和队列已经被封装好,我们使用时只需要按照如下步骤调用即可. 1.包含相关的头文件 包含栈头文件: #include<stack> 包含队列头文件: #include<qu ...

  5. 'javac' 不是内部或外部命令,也不是可运行的程序

    win10 系统下'javac' 不是内部或外部命令,也不是可运行的程序 1.在系统变量下面配置 JAVA_HOME:你自己的jdk的路径 CLASSPATH= .;%JAVA_HOME%libdt. ...

  6. C++_新特性总结与未来的路

    了解C++之后,可以阅读一些高级主题和面向对象编程相关的书籍: OOP有助于开发大型的项目,并提高其可靠性: OOP方法的基本活动之一就是发明能够模拟当前情况的类.当前情况被统称为问题域. 由于实际问 ...

  7. Bound Found(思维+尺取)

    Signals of most probably extra-terrestrial origin have been received and digitalized by The Aeronaut ...

  8. Apache Shiro(六)-基于URL配置权限

    数据库 先准备数据库啦. DROP DATABASE IF EXISTS shiro; CREATE DATABASE shiro DEFAULT CHARACTER SET utf8; USE sh ...

  9. hdu1286 找新朋友 欧拉函数模板

    首先这一题用的是欧拉函数!!函数!!不是什么欧拉公式!! 欧拉函数求的就是题目要求的数. 关于欧拉函数的模板网上百度一下到处都是,原理也容易找,这里要介绍一下另一个强势模板. 在这一题的讨论里看到的. ...

  10. python--交互器，编译器

    1在写python的时候调交互器的作用 唯一作用:调试代码 2.编译器