知识点：

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. [2019.03.16]使用DOM操作函数和CSS选择器来针对已有的HTML进行只凭JS的改动
			
    刚入职的时候看到公司用的HTML日志生成工具附带的Panel,工具不够用,找个Fail还要找半天,于是自己琢磨着添砖加瓦.以前也是个半吊子前端工程师,现在可倒好,想要改页面却连页面生成的模板在哪里都不 ...
    
			
    2. 
						
  2. DP的优化总结
			
    一.预备知识 \(tD/eD\) 问题:状态 t 维,决策 e 维.时间复杂度\(O(n^{e+t})\). 四边形不等式: 称代价函数 w 满足凸四边形不等式,当:\(w(a,c)+w(b,d)\l ...
    
			
    3. 
						
  3. jmeter笔记（5）--参数化--CSV Data Set Config
			
    为了保证脚本的可移植性,我们需要把数据提取出来作为变量,变量可以分为两类: 公用变量:IP.端口.附件路径.CSV文件路径等: 测试变量:用户名.密码.用户ID.商品ID等 使用CSV Data Se ...
    
			
    4. 
						
  4. 思维导图读PMbok第6版 - 项目整合管理（21张全讲）
			
    “ 3个月,800多页书,一大堆工作,复习时间不够呀?老师用思维导图解析PMP,思维导图解析PMP梳理PMbok第6版逻辑结构,帮你您全局掌握PMP知识,重点掌握PMbok难点.快速记忆PMP知识,思 ...
    
			
    5. 
						
  5. GWAS基因芯片数据预处理：质量控制（quality control）
			
    一.数据为什么要做质量控制 比起表观学研究,GWAS研究很少有引起偏差的来源,一般来说,一个人的基因型终其一生几乎不会改变的,因此很少存在同时影响表型又影响基因型的变异.但即便这样,我们在做GWAS时 ...
    
			
    6. 
						
  6. ddt运行测试方法时报错AttributeError: type object 'TestHttpRq' has no attribute 'test_http_rq_login'
			
    import unittest import ddt #装饰器 from ddt import ddt,data,unpack #导入ddt中的各个模块 from homework.unittest_ ...
    
			
    7. 
						
  7. CentOS7_防火墙
			
    1.查看防火墙状态 firewall-cmd --state 2.启动防火墙 systemctl start firewalld.service 3.关闭防火墙 systemctl stop fire ...
    
			
    8. 
						
  8. 常用Hadoop命令(bin)
			
    **** bin 是二进制文件的意思,sbin....据说是superbin(管理员的bin) HDFS命令 某个文件的blocks信息 hadoop fsck /user/xx -files -bl ...
    
			
    9. 
						
  9. [C++]UVaLive7324 ASCII Addtion
			
    Description Nowadays, there are smartphone applications that instantly translate text and even solve ...
    
			
    10. 
						
  10. Linux基础命令（三）——>文件过滤及内容编辑处理命令
			
    1.cat   合并文件或查看文件内容 基本功能:cat   test.txt     查看文件内容 也可以多文件显示 cat  test1.txt test2.txt >test3.txt   ...
    
			
    11.