`

jQuery之实战(checkbox,table)

jquerycheckboxtable 
阅读更多
实现功能如下：参考图片
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>
  • 大小: 46.3 KB
  • 大小: 47.4 KB
  • 大小: 46.6 KB
  • 大小: 46.4 KB
  • 大小: 47.4 KB
  • 大小: 46.2 KB
分享到：
| jQuery之table(隔行变色)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery操作checkbox并获取选中值

    本文将详细讲解如何使用jQuery来操作checkbox，并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中，我们可以使用不同的选择器来选取页面上的checkbox元素。...

    关于表格（table）中checkbox等相关事件操作（动态添加行+隔行换色等相关）（jquery）

    在网页开发中，表格（Table）是展示数据的常用组件，而jQuery库为开发者提供了丰富的API，使得操作表格中的元素，如复选框（Checkbox），变得更加便捷。本篇将详细探讨如何利用jQuery实现表格中checkbox的相关事件...

    jquery 设置select checkbox radio只读

    昨天网上找了很多关于设置select checkbox radio只读的，都没办法满足要求，自己写了一个

    jquery checkbox 选中 取消 checkbox多选

    本文将深入探讨如何使用jQuery来实现复选框（checkbox）的选中和取消选中功能，以及如何处理多选的情况。 首先，我们需要理解HTML中的`&lt;input&gt;`元素类型为"checkbox"的基本用法。复选框用于让用户从多个选项中选择...

    jquery 的checkbox样式

    对于“jQuery的checkbox样式”，这是一个关注于提升网页中复选框（checkbox）视觉效果的主题。在这个场景中，我们讨论的是一个基于jQuery的插件，它专门用于美化标准HTML复选框的样式。 该插件的名称可能为“jQuery...

    jQuery制作全选CheckBox

    ### jQuery实现全选CheckBox功能详解 #### 背景与需求 在Web开发中，特别是在表单处理方面，经常会遇到需要实现多个复选框（CheckBox）的“全选”、“反选”等功能的需求。这样的功能不仅可以提升用户体验，还能...

    jquery之checkbox操作(v1.0.0)

    在本教程中，我们将深入探讨如何使用jQuery来操作checkbox元素，特别是动态生成、设置显示数量以及获取选中项等核心知识点。 首先，让我们了解checkbox的基本概念。Checkbox是HTML中的一个表单元素，用于让用户对一...

    jquery模拟div多选checkbox下拉框

    1. **jQuery选择器和DOM操作**：在创建这个下拉框时，jQuery的选择器会用于选取特定的DOM元素，例如`&lt;div&gt;`和`&lt;input type="checkbox"&gt;`。同时，jQuery提供了丰富的DOM操作方法，如`.append()`用于添加元素，`....

    jquery input checkbox 联动

    本文将深入探讨如何在jQuery环境下实现输入框（input）复选框（checkbox）的联动效果，即当某个复选框被选中时，能够自动触发关联的上级或下级复选框的状态改变。 ### 1. jQuery 基础 首先，确保你的项目已经引入...

    jQuery的高性能TreeView源码(带CheckBox)

    jQuery的高性能TreeView源码(带CheckBox) 1：支持静态的树，即一次性将全部数据加载到客户端。 2：异步树，即一次只加载一级或若干级节点，子节点可以异步加载数据。 3：Checkbox树（可能是静态树也可能是异步树...

    JQuery操作checkbox、radio等示例

    本篇文章将深入探讨如何使用jQuery来操作checkbox和radio元素，这两种元素在表单提交和用户交互中扮演着重要角色。 首先，让我们了解checkbox和radio的基本概念。Checkbox用于提供多选选项，用户可以勾选多个选项；...

    JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值

    JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值

    绚丽的复选框 jquery-checkbox

    **绚丽的复选框 jQuery-Checkbox** 在网页设计中，复选框（checkbox）是常见的交互元素，用于让用户选择一个或多个选项。然而，原始的HTML复选框样式通常较为简单，缺乏吸引力。为了提升用户体验和界面美观度，...

    jquery 对checkbox的操作

    本文将详细探讨如何使用jQuery对checkbox进行操作，这些操作包括选择、取消选择、检查状态以及实现更复杂的交互效果。 一、jQuery选择checkbox 在jQuery中，我们可以使用不同的选择器来选取checkbox元素。例如，`$...

    jquery checkbox树

    jquery 树形 checkbox jQuery(document).ready(function(){ jQuery(".mytree").checkboxTree({ collapsedarrow: "images/checkboxtree/img-arrow-collapsed.gif", expandedarrow: "images/checkboxtree/img-...

    Jquery全选反选Checkbox

    "Jquery全选反选Checkbox"是一个常见的功能需求，特别是在需要用户批量选择或取消选择多个选项的场景下。这个功能通常应用于表格、列表或其他数据展示组件，让用户能够快速地对一组复选框进行全选或反选操作。 首先...

    jquery获取checkbox选中的值

    $('table tr').find('input[type=checkbox]').each(function(index) { if (index % 2 === 0) { $(this).prop('checked', true); } else { $(this).prop('checked', false); } }); }); ``` 以上就是使用...

    jQuery实现table表格checkbox全选的方法分析

    本文实例讲述了jQuery实现table表格checkbox全选的方法。分享给大家供大家参考，具体如下： 今天在页面中使用jQuery实现了全选框操作，如图： 具体的实现过程很简单： 第一步 设计一个简单的表格： 设置表格列标题...

    jQuery 对checkbox的操作

    jQuery 对checkbox的操作

Magicbox
Global site tag (gtag.js) - Google Analytics