jQuery实现 注册时选择阅读条款 左右移动


Posted in Javascript onApril 11, 2013

注册时选择阅读条款

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <title>demo2.html</title> 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
    <meta http-equiv="description" content="this is my page"> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
        var $submitBtn=$("#submitBtn");//获取按钮对象 
        //为按钮注册点击事件 
        $submitBtn.click(function(){ 
            //alert("我被点击了!"); 
        }); 
        //第二种  绑定事件 第一个参数是绑定事件的类型,第二个参数是触发的函数 
        $(submitBtn).bind("click",function(){ 
            var $check=$("#agree");//获取checkbook的元素对象 
            //把jQuery转换成Dom对象 
            /*var checkDom=$check[0]; 
            if(checkDom.checked){ 
                alert("同意注册!"); 
            }else{ 
                alert("请选择同意条款!"); 
            }*/ 
            if($check.is(":checked")){ 
                alert("同意注册!");  
            }else{ 
                alert("请选择同意条款!"); 
            } 
        }); 
    }); 
</script> 

  </head> 
  <body> 
    注册条款:<input type="checkbox" id="agree"/>我已仔细阅读并接受csdn注册条款。 
    <input type="submit" value="注册" id="submitBtn"/> 
  </body> 
</html>

左右移动  ------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <title>demo03.html</title> 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
    <meta http-equiv="description" content="this is my page"> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
     $(document).ready(function(){ 
            var $romve=$("#romve"); 
            var $romves=$("#romves"); 
            $romve.click(function(){ 
                var $opts=$("#ropt>option:selected"); 
                $opts.appendTo("#lopt"); 
            }); 
            $romves.bind("click",function(){ 
                var $opts=$("#ropt>option"); 
                alert($opts.length); 
                $opts.appendTo("#lopt"); 
            }); 
            //双击 
            $("#ropt").bind("dblclick",function(){ 
                var $pots=$("#ropt>option:checked"); 
                $pots.appendTo("#lopt"); 
            }); 
         }); 
     $(document).ready(function(){ 
            var $lromve=$("#lromve"); 
            var $lromves=$("#lromves"); 
            //注册click事件 
            $lromve.click(function(){ 
                var $opts=$("#lopt>option:selected"); 
                $opts.appendTo("#ropt"); 
            }); 
            //绑定事件 
             $lromves.bind("click",function(){ 
                var $opts=$("#lopt>option");//获取所有的option 
                //alert($opts.length); 
                $opts.appendTo("#ropt"); 
                //$("#ropt").append($opts); 
             }); 
            //双击 
            $("#lopt").bind("dblclick",function(){ 
                var $opts=$("#lopt>option:checked");//获取所有的option 
                $opts.appendTo("#ropt"); 
            }); 
        }); 
</script> 
  </head> 
  <body> 
       <h1 align="center">左右漂移</h1> 
       <div style="position: absolute; left: 450px; top: 120px"> 
          <div style="float:left; width: 200px; height: 300px; background-color:lightsteelblue; text-align: center;"><br><br> 
                      <select id="lopt" multiple="multiple" size="9" style="width: 80px;"> 
                                          <option>aa</option> 
                                          <option>bb</option> 
                                          <option>cc</option> 
                                          <option>dd</option> 
                                          <option>ee</option> 
                                          <option>ff</option> 
                                          <option>gg</option> 
                                          <option>hh</option> 
                                          <option>pp</option>               
                      </select> 
                       <br/><br/> 
                      <input type="button" id="lromve" value="选中的右移" style="width: 80px;"/><br/><br/> 
                      <input type="button" id="lromves" value="全部右移" style="width: 80px;"/> 
          </div> 
          <div style ="width: 200px; height: 300px; background-color: #bbffaa; text-align: center;"><br><br> 
                      <select id="ropt" multiple="multiple" size="9" style="width: 80px;"> 
                                          <option>选项1</option> 
                                          <option>选项2</option> 
                                          <option>选项3</option> 
                                          <option>选项4</option> 
                                          <option>选项5</option> 
                                          <option>选项6</option> 
                                          <option>选项7</option> 
                                          <option>选项8</option> 
                                          <option>选项9</option>          
                      </select> 
                       <br/><br/> 
                      <input type="button" id="romve" value="选中的左移" style="width: 80px;"/><br/><br/> 
                      <input type="button" id="romves" value="全部左移" style="width: 80px;"/> 
          </div> 
       </div> 
  </body> 
</html> 

Javascript 相关文章推荐
javaScript如何处理从java后台返回的list
Apr 24 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
JS中箭头函数与this的写法和理解
Jan 14 Javascript
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 #Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 #Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 #Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 #Javascript
在JavaScript并非所有的一切都是对象
Apr 11 #Javascript
在JavaScript中typeof的用途介绍
Apr 11 #Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 #Javascript
You might like
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
jQuery总体架构的理解分析
2011/03/07 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
Python实例之wxpython中Frame使用方法
2014/06/09 Python
优化Python代码使其加快作用域内的查找
2015/03/30 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
入学申请自荐信范文
2014/02/26 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
个人授权委托书范本
2014/09/14 职场文书
高中校园广播稿
2014/10/21 职场文书
怒海潜将观后感
2015/06/11 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python