提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery注册 实现 选择 移动 阅读 左右 条款
2023-06-13 09:14:49 时间

注册时选择阅读条款

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

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


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

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> 
<html> 
 <head> 
   <title>demo03.html</title> 
   <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"> 
   <metahttp-equiv="description"content="thisismypage"> 
   <metahttp-equiv="content-type"content="text/html;charset=UTF-8"> 
   <!--<linkrel="stylesheet"type="text/css"href="./styles.css">--> 
<scripttype="text/javascript"src="../js/jquery-1.9.1.js"></script> 
<scripttype="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> 
      <h1align="center">左右漂移</h1> 
      <divstyle="position:absolute;left:450px;top:120px"> 
         <divstyle="float:left;width:200px;height:300px;background-color:lightsteelblue;text-align:center;"><br><br> 
                     <selectid="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/> 
                     <inputtype="button"id="lromve"value="选中的右移"style="width:80px;"/><br/><br/> 
                     <inputtype="button"id="lromves"value="全部右移"style="width:80px;"/> 
         </div> 
         <divstyle="width:200px;height:300px;background-color:#bbffaa;text-align:center;"><br><br> 
                     <selectid="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/> 
                     <inputtype="button"id="romve"value="选中的左移"style="width:80px;"/><br/><br/> 
                     <inputtype="button"id="romves"value="全部左移"style="width:80px;"/> 
         </div> 
      </div> 
 </body> 
</html> 

相关文章