jQuery应用

周一Monday

浏览: 346386 次
来自: 北京

最近访客更多访客>>

浅绿蓂荚

tudou110

mrjacro

foreach4

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript&jQuery

Jquery

1.全选/全不选

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Demo</title>

<script type="text/javascript" src="js/jquery-1.8.2.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		
		//全选/全不选
		$("#checkAllOrNo").click(function(){
			$("[name=items]:checkbox").attr("checked",this.checked);
		});
		
		//全选
		$("#checkAll").click(function(){
			$("[name=items]:checkbox").attr("checked",true);
		});
		
		//全不选
		$("#checkNo").click(function(){
			$("[name=items]:checkbox").attr("checked",false);
		});
		
		//反选
		$("#checkReverse").click(function(){
			$("[name=items]:checkbox").each(function(){
				this.checked=!this.checked;
			});
		});
		
		
	});
</script>

</head>
<body>

<form>
	
	<input type="checkbox" name="checkItems" id="checkAllOrNo" value="全选/全不选"/>全选/全不选
	<br />
	
	<input type="checkbox" name="items" value="足球"/>足球
	<input type="checkbox" name="items" value="篮球"/>篮球
	<input type="checkbox" name="items" value="游泳"/>游泳
	<input type="checkbox" name="items" value="唱歌"/>唱歌
	<br>

	<input type="button" name="checkall" id="checkAll" value="全选" />
	<input type="button" name="checkall" id="checkNo" value="全不选" />
	<input type="button" name="checkall" id="checkReverse" value="反选" />

</form>

</body>
</html>

效果：

2. 两个select内容相互移动

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Demo</title>

<script type="text/javascript" src="js/jquery-1.8.2.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		
		//左移一个
		$("#left").click(function(){
			$("#first option:selected").appendTo("#second");
		});
		
		//全部左移
		$("#left_all").click(function(){
			$("#first option").appendTo("#second");
		});
		
		//右移一个
		$("#right").click(function(){
			$("#second option:selected").appendTo("#first");
		});
		
		//全部右移
		$("#right_all").click(function(){
			$("#second option").appendTo("#first");
		});
		
		//双击左移
		$("#first").dblclick(function(){
			$("#first option:selected").appendTo("#second");
		});
		
		//双击右移
		$("#second").dblclick(function(){
			$("#second option:selected").appendTo("#first");
		});
		
	});
</script>

</head>
<body>

<form action="" method="post">
	<table border="1">
		<tr>
			<td>
				<select name="first" size="10" multiple="multiple" id="first">
				  <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>
				  <option value="选项6">选项6</option>
				  <option value="选项7">选项7</option>
				  <option value="选项8">选项8</option>
				</select>  
			</td>
			 <td valign="middle">
			   <input name="left"  id="left" type="button"  value="左移一个" /><br/> 
			   <input name="left_all" id="left_all"  type="button"  value="全部左移" /><br/> 
			   <input name="right"  id="right" type="button" value="右移一个" /><br/>
			   <input name="right_all"  id="right_all" type="button"  value="全部右移" />
			</td>
			<td>
				 <select name="second" size="10" multiple="multiple"  id="second">
					 <option value="选项9">选项9</option>
				 </select>
			</td>
		</tr>
	</table>
</form>

</body>
</html>

效果：