知识点：

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. 基于Android P系统对selinux相关整理
			
    1.首先selinux是一种加强文件安全的一种策略.主要包含进程和文件对象. 在system\sepolicy\public\attributes文件中有: # All types used for  ...
    
			
    2. 
						
  2. django下的xadmin相关设置
			
    后台设置中文在 settings.py LANGUAGE_CODE = 'zh-hans' TIME_ZONE = 'Asia/Shanghai' USE_I18N = True USE_L10N = ...
    
			
    3. 
						
  3. P1339 [USACO09OCT]热浪Heat Wave
			
    我太lj了,所以趁着夜色刷了道最短路的水题....然后,,我炸了. 题目描述: The good folks in Texas are having a heatwave this summer. T ...
    
			
    4. 
						
  4. 「BZOJ2733」「洛谷3224」「HNOI2012」永无乡【线段树合并】
			
    题目链接 [洛谷] 题解 很明显是要用线段树合并的. 对于当前的每一个连通块都建立一个权值线段树. 权值线段树处理操作中的\(k\)大的问题. 如果需要合并,那么就线段树暴力合并,时间复杂度是\(nl ...
    
			
    5. 
						
  5. fastclick原理剖析及其用法
			
    移动端点击延迟事件 移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟. 原因: 移动端的双击会缩放导致click判断延迟.这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件, ...
    
			
    6. 
						
  6. SQL SERVER 2008远程数据库移植到本地的方法
			
    https://blog.csdn.net/wuzhanwen/article/details/77449229 Winform程序或网站后台的SQL SERVER 2008放置在远程服务器上,用Mi ...
    
			
    7. 
						
  7. Linux 三剑客（Awk、Sed、Grep）
			
    grep/egrep 主要作用:给搜索过滤出来的内容加上颜色和排除功能 常用参数 -V 打印grep的版本号 -E 解释PATTERN作为扩展正则表达式,也就相当于使用egrep. 或操作 -F 解释 ...
    
			
    8. 
						
  8. 说说PC站和移动站的移动适配关系优化
			
    曾经写过关于手机网站的SEO优化方向,但是多数是注重在移动网站代码方面,而把移动和PC的重点关系优化给忽略了,这方面也是很多做SEO优化站长给忽略的一些事情. 2015年11月6日,在百度站长平台可以 ...
    
			
    9. 
						
  9. (N叉树 递归) leetcode 590. N-ary Tree Postorder Traversal
			
    Given an n-ary tree, return the postorder traversal of its nodes' values. For example, given a 3-ary ...
    
			
    10. 
						
  10. 理解 YOLO
			
    YOLO: 1. YOLO的网络结构 YOLO v1 network (没看懂论文上的下图,看下面这个表一目了然了) 24层的卷积层,开始用前面20层来training, 图片是224x224的,然后 ...
    
			
    11.