手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery实现 注册时选择阅读条款 左右移动
jQuery实现 注册时选择阅读条款 左右移动
摘要:注册时选择阅读条款demo2.html$(document).ready(function(){var$submitBtn=$("#subm...

注册时选择阅读条款

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

<>

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

<>

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

<div><br><br>

<select id="lopt" multiple="multiple" size="9">

<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="选中的右移"/><br/><br/>

<input type="button" id="lromves" value="全部右移"/>

</div>

<div style ="width: 200px; height: 300px; background-color: #bbffaa; text-align: center;"><br><br>

<select id="ropt" multiple="multiple" size="9">

<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="选中的左移"/><br/><br/>

<input type="button" id="romves" value="全部左移"/>

</div>

</div>

</body>

</html>

【jQuery实现 注册时选择阅读条款 左右移动】相关文章:

jQuery实现html表格动态添加新行的方法

jQuery实现表格行上下移动和置顶效果

jQuery实现文本展开收缩特效

js实现顶部可折叠的菜单工具栏效果实例

JavaScript实现点击自动选择TextArea文本的方法

jQuery实现延迟跳转的方法

JavaScript实现单击下拉框选择直接跳转页面的方法

JQuery中DOM实现事件移除的方法

JS实现上下左右对称的九九乘法表

javascript实现表格增删改操作实例详解

精品推荐
分类导航