jq 操作表单中 checkbox 全选 单选
知识点：
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 全选 单选的更多相关文章
- 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=& ...
随机推荐
- 为知笔记Linux版编译使用记录
本文档长期不定时更新,根据使用情况进行反馈. 目录 编译 Error creating SSL context 无法输入中文 如何打包使用 桌面图标 Markdown Windows 版本差异 常用快 ...
- P1536 村村通
原题链接 https://www.luogu.org/problemnew/show/P1536 昨天刚学的并查集,今天正好练习一下,于是就找到了这个题 看起来好像很简单,尤其是你明白了思路之后,完全 ...
- Mac anaconda安装 “conda command not found” 解决方法
官网下载包直接安装的时候可能会产生这种问题,这主要还是环境变量配置的问题 一般我们添加环境变量的方法是编辑.bash_profile或.bashrc,在文件里插入下面这段代码 export PATH= ...
- dgraph实现基本操作
dgraph实现基本操作 简单介绍 dgraph 是一个分布式图数据库 mutate 为一个突变, 一般认为添加数据或者是删除数据为一个突变 query 为一个查询 golang实现dgraph的基本 ...
- JWT 加密
什么是JWT Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点 ...
- Windows Server2012 R2 安装.NET Framework 3.5
拿到手的虚拟机系统是Windows server 2012R2,本想着安装SQlserver2012轻轻松松,结果途中警告未安装.NET Framework 3.5.于是找了个.NET Framewo ...
- crm 一级菜单排序,二级菜单选中并且展开,非菜单权限的归属,权限粒度控制到按钮级别
排序 /rbac/templatetags/rbac.py from django import template from django.conf import settings import re ...
- 实现IOC功能的简单Spring框架
需求分析 设计一个含有IOC的简单Spring,要求含有对象注册.对象管理以及暴露给外部的获取对象功能. 项目设计 对于注册的对象用一个类BeanInfo来描述其信息,包括对象标识.全类名以及属性名与 ...
- Google Protocol Buffer项目无法加载解决方案
http://blog.csdn.net/suixiangzhe/article/details/52171313 今天下载Google Protocol Buffer源码研究时发现打开工程后所有项目 ...
- mysql的order by注入
最近在做一些漏洞盒子后台项目的总结,在盒子众多众测项目中,注入类的漏洞占比一直较大.其中Order By注入型的漏洞也占挺大一部分比例,这类漏洞也是白帽子乐意提交的类型(奖金高.被过滤概览小).今天给 ...