jquery实现复选框单选全选，input type="checkbox"复选框样式修改demo

1、效果图

2、css样式

/*common css begin*/
			*{margin:0px;padding:0px;}
			body{font-family: 微软雅黑,Microsoft yahei,Arial,Verdana,Tahoma,sans-serif; font-size: 12px;}
			a { color: #666; text-decoration: none; cursor: pointer; }
			a, input { outline: none; }
			ul li{list-style: none;}
			.fl { float: left; }
			.fr { float: right; }
			.clearfix:after{content:"";display:block;clear: both;}
			/*common css end*/
			.content{margin:10px;}
			table { border-collapse: collapse; border-spacing: 0; }
			table tr td { border: 1px solid #ddd; padding: 5px 10px; height: 28px; font-size: 12px; color: #333; word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
			table tr td.center { text-align: center; }
			table tr:first-of-type td { background: #f5f5f5; font-weight: bold; text-align: center; }
			table td .checkbox { height: 18px; line-height: 18px;display: inline-block; padding-left: 16px; width: auto; overflow: hidden; background: url(images/check.png) no-repeat left 0px; }
			table td .checkbox.curr {display: inline-block; padding-left: 16px; width: auto; overflow: hidden; background: url(images/check_on.png) no-repeat left 3px; }
			input{width:20px;height: 20px;border:1px solid #317FD8;}

3、html结构

		

			

				

					

						
 序号 
						

					   	  全选
				       
					
					

						
 1 
						

							
						
					
					

						
 2 
						

							
						
					
					

						
 3 
						

							
						
					
				
			
		

3、jquery代码，需要先引入jquery库