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

注册时选择阅读条款

<!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>

赞 (0)

相关推荐

  • 基于jquery+thickbox仿校内登录注册框

    基于jquery+thickbox仿校内登录注册框

    下面将我用thickbox和css实现校内登录(注册)框与大家分享下----->效果图如下: 方法很简单,就是用thickbox的iframe模式,将另一个页面嵌套即可,然后在这个页面里写ajax来实现相应的功能. 代码: 注册:regUser.html 复制代码 代码如下: <link type="text/css" href="css/reg.css" rel="Stylesheet" /> <script type=

  • jquery实现的用户注册表单提示操作效果代码分享

    jquery实现的用户注册表单提示操作效果代码分享

    本文实例讲述了jquery实现的用户注册表单提示操作效果.分享给大家供大家参考.具体如下: jQuery实现的用户注册表单上方弹窗提示文字特效源码,是一段不仅可以在输入的表单上方提示注意事项,同时也可以进行输入验证的代码,是一款非常实用的特效代码,值得大家学习. 运行效果图:                               -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分

  • jquery实现的弹出层登录和全屏层注册特效代码分享

    jquery实现的弹出层登录和全屏层注册特效代码分享

    本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下: jquery实现的弹出层登录和无刷新切换全屏层注册特效源码,是一段非常适合现代审美观的网站登录和注册效果代码,本段实例主要表现在点击登录后在当前页面内弹出登录遮罩层,而点击注册链接时,在当前页面内无刷新显示全屏注册层效果,是一款非常实用的特效代码,值得大家学习. 运行效果图:                           -------------------查看效果 下载源码-----------------

  • jquery 弹出层注册页面等(asp.net后台)

    jquery 弹出层注册页面等(asp.net后台)

    [一]需求如下: 1:注册不新开页面,改成弹出层, 2:新增用户买房欲望调查, 3:用户名自动检索出推荐的用户名, 4:出生日期用户输入改成控件选择. 5:尽力提高用户体验,吸引用户注册. [二]无图无真相. 1:简化后的页面: 2:浮出文字提示和圆角边框: 3:支持民意调查(异步提交) 4:自动检索推荐用户名(测试数据) 5:数据有效性验证 6:日历 7:支持拖拽 8:滑入显示 9:over [三]代码分析1.弹出层的制作, a.先引用这三个: 复制代码 代码如下: <script src=&qu

  • jQuery获取注册信息并提示实现代码

    复制代码 代码如下: <script type="text/javascript"> $(function () { $("#btnSubmit").click(function () { var txtName = $('#txtName').val(); var gender = $('#gender').is(':checked') ? '男' : '女'; var isMarry = $('#isMarry').is(':checked') ?

  • 基于jquery实现一个滚动的分步注册向导-附源码

    基于jquery实现一个滚动的分步注册向导-附源码

    先给大家展示效果图,需要的朋友可以下载源码哦- 查看演示        下载源码 HTML 首先要载入jquery库和滚动插件scrollable.js <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="scrollable.js"></script&

  • 使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能（含后台代码）

    需要引入插件jquery.md5.js 可直接在IIS下运行: 用户名:Ethan.zhu 密 码:123456789 完整文件下载:WebApplication1_jb51.rar 首先将按钮单击事件的异步验证提取出来作为一个单独的函数,需要将按钮单击事件里面的变量提取出来定义为全局变量,并且增加一个变量editPass(用来标记是自己输入密码,还是从cookies中读取的密码) 复制代码 代码如下: var wrongTypeName, //用户名的错误类型,可以直接作为错误提示信息数组的下

  • jQuery回车实现登录简单实现

    复制代码 代码如下: login_form为表单ID名.这里只是实现回车表单提交 $("#login_form").keypress(function(e) { if (e.which == 13) { $("#login_form").submit(); } }); $(window).keydown(function (e) { if (e.which == 13) { return false; } })

  • 基于jquery的内容循环滚动小模块（仿新浪微博未登录首页滚动微博显示）

    从需求上来说,这个功能需要实时调用最新的微博数据,单就前端开发来说,其需求可以拆分如下: 1 内容持续滚动: 2 新微博将下面的微博先推下去,然后淡入进来: 3 鼠标经过内容暂停滚动: 4 容器底部渐变消失在背景色下. 上述4个需求之中,需求1-3为js技术实现,需求4为css技术实现,下面逐个需求来讲. 需求1和需求2:内容持续滚动的需求有些类似前一篇文章<小模块:公告滚动并暂停>中介绍的功能,在那篇文章中,此功能使用css的position定位来控制整个ul列表的移动动画.结合需求2,我们

  • jQuery实现用户注册的表单验证示例

    复制代码 代码如下: <html> <head> <meta charset="utf-8"/> <script type="text/javascript" src="../script/jquery-1.4.2.min.js"></script> <script> $(function(){ $(":input.required").each(func

  • jQuery实现弹出窗口中切换登录与注册表单

    jQuery实现弹出窗口中切换登录与注册表单

    当点击页面中的登录或注册按钮时,将会弹出一个模态窗口,就是一个弹出层,我们可以在弹出层上轻松的切换登录与注册表单,极大的方便用户,不需要关闭层再去点击转向其他操作,在很多网站上已经广泛应用. 本文结合实例,通过使用jQuery以及CSS3和HTML5技术实现这一效果. HTML 我们现在主页面上设置两个链接按钮,即登录和注册按钮. <nav class="main_nav"> <ul> <li><a class="cd-signin&

随机推荐