jQuery之实战(checkbox,table)

liuzidong

浏览: 2271029 次
性别:
来自: 成都

最近访客更多访客>>

joechl

njdccy

mushroom12

musicxujun

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Jquery
JavaScript

jquery checkbox table

实现功能如下：参考图片
1 页面加载时效果

2 全选效果

3 取消全选效果

4 反选效果

5 全选奇行效果

6 全选偶行效果

7 点击复选框效果

具体代码如下：
CSS代码如下：

 <style type="text/css">
            body {
				font-family: Arial, Helvetica, sans-serif;
			}	
			
            .listhead
			{
			  FONT: 15pt "宋体";
			  COLOR: #010778;
			  BACKGROUND-COLOR: #E7EEF7;
			  BORDER-LEFT: #FFFFFF 1px solid;
			  BORDER-TOP: #FFFFFF 1px solid;
			  BORDER-RIGHT: #D9DFE7 1px solid;
			  BORDER-BOTTOM: #D9DFE7 1px solid;
			}
			
        </style>

jQuery代码如下：

<script type="text/javascript" >
		
			$(function(){
			  
			    $('#checkAll').click(function(){
			        /*			    	
			    	if(this.checked == true){
			    		$(":checkbox[name=checkUser]").attr("checked",true);
			    	}else{
			    		$(":checkbox[name=checkUser]").attr("checked",false);
			    	}*/
			    	
			    	$("input:checkbox[name=checkUser]").attr("checked",this.checked);
			    	if(this.checked){
			    	
			    		  $("#tbody>tr").each(function(index){
			    		  	  this.style.backgroundColor = "#cfeace";
			    		  });
			    	}else{
			    		 $("#tbody>tr").each(function(index){
			    		  	  this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
			    		 });
			    	}
			    						   
			    });	
			    
			    $("#selectAll_1").click(function(){
			    	$("input:checkbox[name=checkUser,checkAll]").attr("checked",true);
			    	$("#tbody>tr").each(function(index){
			    		  	  this.style.backgroundColor = "#cfeace";
			    	});
			    });		
			    
			    $("#selectAll_2").click(function(){
			    	//$("input:checkbox[name=checkUser,checkAll]").attr("checked",false);
			    	$("input:checkbox[name=checkUser,checkAll]").removeAttr("checked");//取消全选 
			    	$("#tbody>tr").each(function(index){
			    		this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
			    	});
			    });		
			    
			    $("#selectAll_3").click(function(){
			        
			        //可用长度来判断是否选定:选中为1,没选为0
					//alert($("#checkAll:checked").length);
					
					if ($("#checkAll").is(":checked")) {
						//alert("选中了。。");
		   				$("#checkAll").removeAttr("checked");
		   			}else{
		   			   // alert("没选中。。");
		   				$("#checkAll").attr("checked",true);
		   			}
					
					/* 
					$("input:checkbox[name=checkUser]").each(function(index){						
						//在jQuery内部用this可提高速度						
						if(this.checked){
						   this.checked = false;						   
						}else{
						   this.checked = true;						  
						} 
					});*/
					
					$("#tbody>tr").each(function(index){
					
			    		  if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
			    		  	 $(this).find("td:eq(0)>input:checkbox").attr("checked",false);
			    		  	 this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
			    		  }else{
			    		  	  $(this).find("td:eq(0)>input:checkbox").attr("checked",true);
			    		  	  this.style.backgroundColor = "#cfeace";
			    		  }
			    	});

			    	
			    });		
			    
			    $("#selectAll_4").click(function(){
			    
			    	$("input:checkbox[name=checkUser]:even").attr("checked",true);			    	
			    	$("#tbody>tr").each(function(index){					
			    		  if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){			    		  	
			    		  	  this.style.backgroundColor = "#cfeace";
			    		  }
			    	});
			    	
			    });	
			    
			    $("#selectAll_5").click(function(){
			    	$("input:checkbox[name=checkUser]:odd").attr("checked",true);
			    	$("#tbody>tr").each(function(index){					
			    		  if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){			    		  	
			    		  	  this.style.backgroundColor = "#cfeace";
			    		  }
			    	});
			    	
			    });	 
			    
			    //$("#tbody>tr:even").css("background-color",'#F3F3F3');
			    //$("#tbody>tr:odd").css("background-color",'#DEE9F7'); 	
			    
			    $("#tbody>tr").each(function(index){
			    	
			    	this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
			    	
			    	/*
			    	$(this).mouseover(function() {
					  this.style.backgroundColor = "#EEF8FF";
					});
					$(this).mouseout(function() {
					  this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
					});*/
					
					$(this).bind({
						mouseover:function(){
							this.style.backgroundColor = "#EEF8FF";
							if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
							  this.style.backgroundColor = "#cfeace";
							}
						},mouseout:function(){
						    this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
							if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
							  this.style.backgroundColor = "#cfeace";
							}
						},click:function(){
							//判断tr的第一个td内的input checkbox是什么状态							
							if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
								this.style.backgroundColor = "#cfeace";
							}else{
								this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
							}							
						}						
					});
			    	
			    });		    
			    	    
			});	
			
		</script>

HTML代码如下：

 <div style="padding-left:30%;padding-top:5%">
       <h1>checkbox示例</h1>        
       	 <table style="width:500px;height:100%;align:center;border: 1px black solid;background: white;" bgcolor=#7E92A8 border=0 cellpadding=1 cellspacing=1 rules="all">
       	 	 <thead>
       	 	 	<tr class="listhead">
       	 	 		<th><input type="checkbox" id="checkAll"  name="checkAll"/></th>
       	 	 		<th>姓名</th>
       	 	 		<th>年龄</th>
       	 	 		<th>性别</th>       	 	 		
       	 	 	</tr>
       	 	 </thead>
       	 	 <tbody align="center" id="tbody">
       	 	 	<tr id="tr_1">
       	 	 		<td><input type="checkbox" name="checkUser"  value="1"/></td>
       	 	 		<td>张三</td>
       	 	 		<td>25</td>
       	 	 		<td>男</td>
       	 	 	</tr>
       	 	 	<tr id="tr_2">
       	 	 		<td><input type="checkbox" name="checkUser" value="2"/></td>
       	 	 		<td>李四</td>
       	 	 		<td>20</td>
       	 	 		<td>男</td>
       	 	 	</tr>
       	 	 	<tr id="tr_3"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="3"/></td>
       	 	 		<td>王五</td>
       	 	 		<td>30</td>
       	 	 		<td>女</td>
       	 	 	</tr>     
       	 	 	<tr id="tr_4"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="4"/></td>
       	 	 		<td>李逵</td>
       	 	 		<td>36</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_5"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="5"/></td>
       	 	 		<td>王熙凤</td>
       	 	 		<td>31</td>
       	 	 		<td>女</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_6"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="6"/></td>
       	 	 		<td>刘少国</td>
       	 	 		<td>30</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_7"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="7"/></td>
       	 	 		<td>李四光</td>
       	 	 		<td>30</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_8"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="8"/></td>
       	 	 		<td>何故</td>
       	 	 		<td>30</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_9"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="9"/></td>
       	 	 		<td>王冠</td>
       	 	 		<td>30</td>
       	 	 		<td>女</td>
       	 	 	</tr>    
       	 	 	<tr id="tr_10"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="10"/></td>
       	 	 		<td>王平</td>
       	 	 		<td>18</td>
       	 	 		<td>男</td>
       	 	 	</tr>    	 	 	
       	 	 </tbody>
       	 	 <tfoot>
       	 	 	<tr>
       	 	 		<td colspan="4">
       	 	 			<input type="button" value="全选"    id="selectAll_1"/>
       	 	 			<input type="button" value="取消全选" id="selectAll_2"/>
       	 	 			<input type="button" value="反选"    id="selectAll_3"/>
       	 	 			<input type="button" value="全选奇行" id="selectAll_4"/>
       	 	 			<input type="button" value="全选偶行" id="selectAll_5"/>       	 	 			
       	 	 	   </td>
       	 	 	</tr>
       	 	 </tfoot>
       	 </table> 
       <p><a href="index.jsp">返回</a></p>
       </div>

整个页面代码如下：

<%@ page language="java"  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQuery获取元素写法</title>       		
        <script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>             
        <style type="text/css">
            body {
				font-family: Arial, Helvetica, sans-serif;
			}	
			
            .listhead
			{
			  FONT: 15pt "宋体";
			  COLOR: #010778;
			  BACKGROUND-COLOR: #E7EEF7;
			  BORDER-LEFT: #FFFFFF 1px solid;
			  BORDER-TOP: #FFFFFF 1px solid;
			  BORDER-RIGHT: #D9DFE7 1px solid;
			  BORDER-BOTTOM: #D9DFE7 1px solid;
			}
			
        </style>   
		<script type="text/javascript" >
		
			$(function(){
			  
			    $('#checkAll').click(function(){
			        /*			    	
			    	if(this.checked == true){
			    		$(":checkbox[name=checkUser]").attr("checked",true);
			    	}else{
			    		$(":checkbox[name=checkUser]").attr("checked",false);
			    	}*/
			    	
			    	$("input:checkbox[name=checkUser]").attr("checked",this.checked);
			    	if(this.checked){
			    	
			    		  $("#tbody>tr").each(function(index){
			    		  	  this.style.backgroundColor = "#cfeace";
			    		  });
			    	}else{
			    		 $("#tbody>tr").each(function(index){
			    		  	  this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
			    		 });
			    	}
			    						   
			    });	
			    
			    $("#selectAll_1").click(function(){
			    	$("input:checkbox[name=checkUser,checkAll]").attr("checked",true);
			    	$("#tbody>tr").each(function(index){
			    		  	  this.style.backgroundColor = "#cfeace";
			    	});
			    });		
			    
			    $("#selectAll_2").click(function(){
			    	//$("input:checkbox[name=checkUser,checkAll]").attr("checked",false);
			    	$("input:checkbox[name=checkUser,checkAll]").removeAttr("checked");//取消全选 
			    	$("#tbody>tr").each(function(index){
			    		this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
			    	});
			    });		
			    
			    $("#selectAll_3").click(function(){
			        
			        //可用长度来判断是否选定:选中为1,没选为0
					//alert($("#checkAll:checked").length);
					
					if ($("#checkAll").is(":checked")) {
						//alert("选中了。。");
		   				$("#checkAll").removeAttr("checked");
		   			}else{
		   			   // alert("没选中。。");
		   				$("#checkAll").attr("checked",true);
		   			}
					
					/* 
					$("input:checkbox[name=checkUser]").each(function(index){						
						//在jQuery内部用this可提高速度						
						if(this.checked){
						   this.checked = false;						   
						}else{
						   this.checked = true;						  
						} 
					});*/
					
					$("#tbody>tr").each(function(index){
					
			    		  if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
			    		  	 $(this).find("td:eq(0)>input:checkbox").attr("checked",false);
			    		  	 this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
			    		  }else{
			    		  	  $(this).find("td:eq(0)>input:checkbox").attr("checked",true);
			    		  	  this.style.backgroundColor = "#cfeace";
			    		  }
			    	});

			    	
			    });		
			    
			    $("#selectAll_4").click(function(){
			    
			    	$("input:checkbox[name=checkUser]:even").attr("checked",true);			    	
			    	$("#tbody>tr").each(function(index){					
			    		  if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){			    		  	
			    		  	  this.style.backgroundColor = "#cfeace";
			    		  }
			    	});
			    	
			    });	
			    
			    $("#selectAll_5").click(function(){
			    	$("input:checkbox[name=checkUser]:odd").attr("checked",true);
			    	$("#tbody>tr").each(function(index){					
			    		  if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){			    		  	
			    		  	  this.style.backgroundColor = "#cfeace";
			    		  }
			    	});
			    	
			    });	 
			    
			    //$("#tbody>tr:even").css("background-color",'#F3F3F3');
			    //$("#tbody>tr:odd").css("background-color",'#DEE9F7'); 	
			    
			    $("#tbody>tr").each(function(index){
			    	
			    	this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
			    	
			    	/*
			    	$(this).mouseover(function() {
					  this.style.backgroundColor = "#EEF8FF";
					});
					$(this).mouseout(function() {
					  this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
					});*/
					
					$(this).bind({
						mouseover:function(){
							this.style.backgroundColor = "#EEF8FF";
							if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
							  this.style.backgroundColor = "#cfeace";
							}
						},mouseout:function(){
						    this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
							if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
							  this.style.backgroundColor = "#cfeace";
							}
						},click:function(){
							//判断tr的第一个td内的input checkbox是什么状态							
							if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
								this.style.backgroundColor = "#cfeace";
							}else{
								this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
							}							
						}						
					});
			    	
			    });		    
			    	    
			});	
			
		</script>

    </head>
    <body>
       <div style="padding-left:30%;padding-top:5%">
       <h1>checkbox示例</h1>        
       	 <table style="width:500px;height:100%;align:center;border: 1px black solid;background: white;" bgcolor=#7E92A8 border=0 cellpadding=1 cellspacing=1 rules="all">
       	 	 <thead>
       	 	 	<tr class="listhead">
       	 	 		<th><input type="checkbox" id="checkAll"  name="checkAll"/></th>
       	 	 		<th>姓名</th>
       	 	 		<th>年龄</th>
       	 	 		<th>性别</th>       	 	 		
       	 	 	</tr>
       	 	 </thead>
       	 	 <tbody align="center" id="tbody">
       	 	 	<tr id="tr_1">
       	 	 		<td><input type="checkbox" name="checkUser"  value="1"/></td>
       	 	 		<td>张三</td>
       	 	 		<td>25</td>
       	 	 		<td>男</td>
       	 	 	</tr>
       	 	 	<tr id="tr_2">
       	 	 		<td><input type="checkbox" name="checkUser" value="2"/></td>
       	 	 		<td>李四</td>
       	 	 		<td>20</td>
       	 	 		<td>男</td>
       	 	 	</tr>
       	 	 	<tr id="tr_3"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="3"/></td>
       	 	 		<td>王五</td>
       	 	 		<td>30</td>
       	 	 		<td>女</td>
       	 	 	</tr>     
       	 	 	<tr id="tr_4"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="4"/></td>
       	 	 		<td>李逵</td>
       	 	 		<td>36</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_5"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="5"/></td>
       	 	 		<td>王熙凤</td>
       	 	 		<td>31</td>
       	 	 		<td>女</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_6"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="6"/></td>
       	 	 		<td>刘少国</td>
       	 	 		<td>30</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_7"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="7"/></td>
       	 	 		<td>李四光</td>
       	 	 		<td>30</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_8"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="8"/></td>
       	 	 		<td>何故</td>
       	 	 		<td>30</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_9"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="9"/></td>
       	 	 		<td>王冠</td>
       	 	 		<td>30</td>
       	 	 		<td>女</td>
       	 	 	</tr>    
       	 	 	<tr id="tr_10"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="10"/></td>
       	 	 		<td>王平</td>
       	 	 		<td>18</td>
       	 	 		<td>男</td>
       	 	 	</tr>    	 	 	
       	 	 </tbody>
       	 	 <tfoot>
       	 	 	<tr>
       	 	 		<td colspan="4">
       	 	 			<input type="button" value="全选"    id="selectAll_1"/>
       	 	 			<input type="button" value="取消全选" id="selectAll_2"/>
       	 	 			<input type="button" value="反选"    id="selectAll_3"/>
       	 	 			<input type="button" value="全选奇行" id="selectAll_4"/>
       	 	 			<input type="button" value="全选偶行" id="selectAll_5"/>       	 	 			
       	 	 	   </td>
       	 	 	</tr>
       	 	 </tfoot>
       	 </table> 
       <p><a href="index.jsp">返回</a></p>
       </div>
    </body>
</html>