知识点：

Note:

1：

　　.prop() 和 .attr() 方法的区别

　　　　.prop() 针对标签既有属性

　　　　.attr() 针对自定义属性

2:

$('input:checked')即为选中元素。

---------------------------------------------------

场景——项目管理需求如下图：

选中全部或部分  成果名称 跳转带至下个页面

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title></title>

	<link rel="stylesheet" href="">

</head>

<body>

<div class="tableWrap">

	<table>

		<thead>

			<tr>

				<td class="checkBox">

					<label>

						<input class="totalCheck"

							type="checkbox">

					</label>

				</td>

				<td>成果名称</td>

				<td>所属单位</td>

				<td>归属产业</td>

				<td>成果分类</td>

				<td>成果所属项目</td>

				<td>成果收益</td>

				<td>时间</td>

				<td>详情</td>

			</tr>

		</thead>

		<tbody>

			<tr>

				<td class="checkBox">

					<label>

						<input class="elCheck"

							type="checkbox"

							name="subCheck">

					</label>

				</td>

				<td class="proName">5546</td>

				<td>sa;djfolskfj</td>

				<td>spdjfl;ksf</td>

				<td>s;ldfk</td>

				<td>sosidjfo</td>

				<td>lskjflksdf</td>

				<td>sldjfl</td>

				<td>

					<a href="javascript:;">进入详情</a>

				</td>

			</tr>

			<tr>

				<td class="checkBox">

					<label>

						<input class="elCheck"

							type="checkbox"

							name="subCheck">

					</label>

				</td>

				<td class="proName">65+</td>

				<td>sa;djfolskfj</td>

				<td>spdjfl;ksf</td>

				<td>s;ldfk</td>

				<td>sosidjfo</td>

				<td>lskjflksdf</td>

				<td>sldjfl</td>

				<td>

					<a href="javascript:;">进入详情</a>

				</td>

			</tr>

			<tr>

				<td class="checkBox">

					<label>

						<input class="elCheck"

							type="checkbox"

							name="subCheck">

					</label>

				</td>

				<td class="proName">656546+</td>

				<td>sa;djfolskfj</td>

				<td>spdjfl;ksf</td>

				<td>s;ldfk</td>

				<td>sosidjfo</td>

				<td>lskjflksdf</td>

				<td>sldjfl</td>

				<td>

					<a href="javascript:;">进入详情</a>

				</td>

			</tr>

			<tr>

				<td class="checkBox">

					<label>

						<input class="elCheck"

							type="checkbox"

							name="subCheck">

					</label>

				</td>

				<td class="proName">65+</td>

				<td>sa;djfolskfj</td>

				<td>spdjfl;ksf</td>

				<td>s;ldfk</td>

				<td>sosidjfo</td>

				<td>lskjflksdf</td>

				<td>sldjfl</td>

				<td>

					<a href="javascript:;">进入详情</a>

				</td>

			</tr>

			<tr>

				<td class="checkBox">

					<label>

						<input class="elCheck"

							type="checkbox"

							name="subCheck">

					</label>

				</td>

				<td class="proName">656546+</td>

				<td>sa;djfolskfj</td>

				<td>spdjfl;ksf</td>

				<td>s;ldfk</td>

				<td>sosidjfo</td>

				<td>lskjflksdf</td>

				<td>sldjfl</td>

				<td>

					<a href="javascript:;">进入详情</a>

				</td>

			</tr>

		</tbody>

	</table>

	<div class="btnWrap clearfix">

		<button class="psszBtn">评审设置</button>

	</div>

</div>

</body>

</html>

　　

js

$('.totalCheck').change(function(){

    $('.elCheck').prop('checked',$(this).prop('checked'));

})

checkFun();

function checkFun(){

    $('.elCheck').click(function(){

        if(!$(this).prop('checked')){

            $('.totalCheck').prop('checked',false);

            $(this).prop('checked',false);

        }else{

           $(this).prop('checked',true);

        }

    })

}   
$('.psszBtn').click(function(){

    var proNameArr= [];

    for(var i = 0; i< $('input:checked').length;i++){

        proNameArr[i] = {

            'id':i,  //项目ID

            'proName':$('input:checked').eq(i).parents('td').siblings('.proName').text()

        };

    };

    console.log(proNameArr);

})

　　





　　
												


											
jq 操作表单中 checkbox   全选 单选的更多相关文章
	

    
								
  1. checkbox  全选 单选的使用
		
    绑定数据 if (!IsPostBack) { using (UsersDataContext con = new UsersDataContext()) { Repeater1.DataSource ...
    
		
    2. 
						
  2. 练习-checkbox 全选 ，反选， 单选，以及取值
		
    1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...
    
		
    3. 
						
  3. 利用jQuery实现CheckBox全选/全不选/反选
		
    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
    
		
    4. 
						
  4. vue开发购物车，解决全选单选问题
		
    实现全选单选,在vue中无法通过this获取input中的checkbox的checked属性,但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定,同样也可以通过这种方式实现购 ...
    
		
    5. 
						
  5. checkbox全选/取消全选
		
    //checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...
    
		
    6. 
						
  6. TreeView checkbox 全选
		
    在使用TreeView 控件 ,进行权限管理的时候,需要使用 checkbox全选. 勾选父节点,子节点全部选中.取消父节点,子节点不选中. 勾选子节点,父节点也选中. 以下是在使用的例子: < ...
    
		
    7. 
						
  7. JS checkbox 全选 全不选
		
    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...
    
		
    8. 
						
  8. checkbox全选，反选，取消选择 jquery
		
    checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){  ...
    
		
    9. 
						
  9. js初学—实现checkbox全选功能
		
    布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Sublime Text 3 安装简记
			
    1.下载:( Sublime Text Version 3.1.1 Build 3176 ) https://www.sublimetext.com/3 2.安装Package Control: &q ...
    
			
    2. 
						
  2. 树莓派中QT实现PWM
			
    树莓派中QT实现PWM 在QT中实现 PWM 使用的驱动为 wiringPi 之前的博客中已经介绍了 wiringPi , BOARD 管脚, BCM 之间的关系 这次, 就介绍在 wiringPi  ...
    
			
    3. 
						
  3. CF350E 【Wrong Floyd】
			
    Description 给定n个点,m条边,k个标记点,hack掉给出的程序. Solution 先考虑不可能hack掉的情况.当所有点都是标记点的时候肯定不能hack掉,也就是\(n=k\).还有就 ...
    
			
    4. 
						
  4. PHP RSA加解密详解（附代码）
			
    前言:RSA加密一般用在涉及到重要数据时所使用的加密算法,比如用户的账户密码传输,订单的相关数据传输等. 加密方式说明:公钥加密,私钥解密.也可以  私钥加密,公钥解密 一.RSA简介 RSA公钥加密 ...
    
			
    5. 
						
  5. Redisson实现分布式锁
			
    转: Redisson实现分布式锁 Redisson文档参考:https://github.com/redisson/redisson/wiki/%E7%9B%AE%E5%BD%95 redis是实现 ...
    
			
    6. 
						
  6. xml转换为json格式时，如何将指定节点转换成数组 Json.NET
			
    使用Json.NET转换xml成json时,如果xml只有单个节点,但json要求是数组形式[], JsonConvert.SerializeXmlNode 并不能自动识别 示例如下: RecordA ...
    
			
    7. 
						
  7. 远程代理模式-Remote Proxy(Java实现)
			
    远程代理模式-Remote Proxy 服务端通过rmi将对象注册到远程服务, 客户端使用时, 只需要通过rmi协议获取即可, 只要接口统一, 即可不需要知道内部具体实现, 直接调用使用. Compa ...
    
			
    8. 
						
  8. 实现IOC功能的简单Spring框架
			
    需求分析 设计一个含有IOC的简单Spring,要求含有对象注册.对象管理以及暴露给外部的获取对象功能. 项目设计 对于注册的对象用一个类BeanInfo来描述其信息,包括对象标识.全类名以及属性名与 ...
    
			
    9. 
						
  9. 2、jQuery的Ajax简单示例
			
    一.创建一个JavaWEBProject 二.创建一个Servlet(下面的例子中用到了Json--第32行,Json的作用是将一个Object类转换为特定格式的字符串,如果不用Json直接返回字符串 ...
    
			
    10. 
						
  10. Java(19)JDBC
			
    一.使用jdbc的步骤 a.引入数据库厂商提供的驱动程序(引入jar包) b.记载驱动程序 Clss.forName("驱动程序类") c.获得连接 Connection con  ...
    
			
    11.