jq 操作表单中 checkbox 全选单选

知识点：

Note:

1：

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

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

　　　　.attr() 针对自定义属性

$('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>

$('.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 全选单选的更多相关文章

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

随机推荐

Heap Partition ZOJ - 3963(贪心)
ZOJ - 3963 贪心做一下就好了反正别用memset #include <iostream> #include <cstdio> #include <sstrea ...
【CSA72G】【XSY3316】rectangle 线段树最小生成树
题目大意有一个 $n\times n$ 的矩阵 $A$.最开始 $A$ 中每个元素的值都为 $0$. 有 $m$ 次操作,每次给你 $x_1,x_2,y_1,y_2,w$,对 ...
flutter - 01 基础介绍以及ListView
这篇主要讲flutter最基本的操作.我们从一个实例入手,先不需要知道它里面的每一行是什么意思,我会慢慢说. main.dart import 'package:flutter/material.da ...
iptables防火墙规则积累
1.内网IP地址端口映射: 通过访问本机地址的3389端口,可以访问到192.168.1.139的远程桌面服务: -A PREROUTING -p tcp -m tcp --dport 3389 ...
前端三剑客:html,css,JavaScript
一.前端概念二.html详细介绍三.css基础四.css盒模型五.css高级布局六.JS基础七.JS常用类八.JS基础操作九.JS高级与事件十.BOM与DOM 十一.jQuery初识 ...
Python基础和原反补码及表达式
基础语法 1.注释 “#”标注的文件 2.数字整数,不区分long和int 进制0xa.0o10.0b10 bool,2个值True.False 浮点数 1.2.3.1314.-0.12.1.46e ...
JS基础-第5天
复习函数函数作用:封装一段代码,封装的功能可以被反复调用执行. 定义函数 // 第一种 - 函数声明 function 函数名(){ } // 第二种 - 函数表达式 var 函数名 = func ...
076、创建Rex-Ray volume （2019-04-23 周二）
参考https://www.cnblogs.com/CloudMan6/p/7624556.html 前面我们安装部署了 Rex-Ray ,并且成功配置 Virtualbox backend ,今 ...
浅谈 JSP & Servlet
body { text-align: center; } div.develon { background-color: #cccccc; font-size: 20px; } 背景相信大家都见过这 ...
使用百度云 BOS 和 C# SDK 开发数据存储
Ø 简介本文主要介绍如何使用百度云的 C# SDK 操作 BOS(Baidu Object Storage/百度对象存储),以及常见问题和解决办法.本文将以以下几点展开学习: 1. 基本介绍 ...

jq 操作表单中 checkbox 全选 单选

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

随机推荐

热门专题

jq 操作表单中 checkbox 全选单选

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