知识点：

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. java网页爬数据获取class中的空格
			
    <ul class=""> <li class="avatar_img"><img src="http://avatar ...
    
			
    2. 
						
  2. 入坑MATLAB必会的吐血总结
			
    本渣想回过头来整理一下MATLAB的一些基本的知识(很多东西比较琐碎,应该系统的梳理梳理),下文中没有提到的,自己用help查即可. 此文用来存个档,便于回顾. 由于matlab各版本部分语法存在差异 ...
    
			
    3. 
						
  3. Mac 使用 OpenMP/Clang
			
    新建 hello.cpp 文件: #include <omp.h> #include <stdio.h> int main() { #pragma omp parallel p ...
    
			
    4. 
						
  4. Nginx+Keepalived搭建高可用负载均衡集群
			
    本文的重点是Keepalived的配置,Nginx的配置就简略带过.软件:CentOS 7.2 / Nginx 1.12.2 / Keepalived 1.3.9 ha-01:192.168.1.97 ...
    
			
    5. 
						
  5. ASP.NET and ADO.NET
			
    1.ASP.NET ASP.NET是一个使用HTML.Css.JacaScript  和服务器脚本创建网页和网站的开发框架 ASP.NET支持 WebPages.MVC.WebForms三种开发模式  ...
    
			
    6. 
						
  6. kubernetes之监控Operator部署Prometheus（三）
			
    第一章和第二章中我们配置Prometheus的成本非常高,而且也非常麻烦.但是我们要考虑Prometheus.AlertManager 这些组件服务本身的高可用的话,成本就更高了,当然我们也完全可以用 ...
    
			
    7. 
						
  7. 常用Hadoop命令(bin)
			
    **** bin 是二进制文件的意思,sbin....据说是superbin(管理员的bin) HDFS命令 某个文件的blocks信息 hadoop fsck /user/xx -files -bl ...
    
			
    8. 
						
  8. 移动开发day1_过渡_2d转换_3d立体
			
    今天是就业班开班的第一天,上完了一天的课,做点总结. 什么叫做移动web 专门在手机或者 平板电脑 浏览器网页 为什么要学习移动web 工资高 1. 人拥有的手机数 大于 电脑的个数 2. 微信 1. ...
    
			
    9. 
						
  9. [源码分析]AbstractStringBuilder
			
    [源码分析]AbstractStringBuilder Java中, AbstractStringBuilder是 StringBuilder 和 StringBuffer 的父类. 所以了解Stri ...
    
			
    10. 
						
  10. 第十三届东北师范大学程序设计竞赛热身赛 C(exgcd+欧拉函数)
			
    题目链接 思路 对于答案,我们考虑对于每个可行的$c$会和多少$d$产生合法序偶.首先证明$c$和$b$必然互质. 假设$c$和$b$不互质,那么设$t_{1}=gcd(c, b),(t_{1} &g ...
    
			
    11.