jquery checkbox全选 获取值
<style>
table {
line-height:35px;
}
</style>
<div align="left" style="margin:5%">
<input type="checkbox" id="all">
<input type="button" value="全选" class="btn" id="selectAll">
<input type="button" value="全不选" class="btn" id="unSelect">
<input type="button" value="反选" class="btn" id="reverse">
<input type="button" value="获得选中的所有值" class="btn" id="getValue">
</div>
<table width="100%" id="list">
<tr>
<td><div align="center"><input type="checkbox" value="1"></div></td>
<td><div align="center">测试1</div></td>
<td><div align="center">测试1</div></td>
<td><div align="center">测试1</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="2" />
</div>
</td>
<td><div align="center">测试2</div></td>
<td><div align="center">测试2</div></td>
<td><div align="center">测试2</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="3" />
</div>
</td>
<td><div align="center">测试3</div></td>
<td><div align="center">测试3</div></td>
<td><div align="center">测试3</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="4" />
</div>
</td>
<td><div align="center">测试4</div></td>
<td><div align="center">测试4</div></td>
<td><div align="center">测试4</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="5" />
</div>
</td>
<td><div align="center">测试5</div></td>
<td><div align="center">测试5</div></td>
<td><div align="center">测试5</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="6" />
</div>
</td>
<td><div align="center">测试6</div></td>
<td><div align="center">测试6</div></td>
<td><div align="center">测试6</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="7" />
</div>
</td>
<td><div align="center">测试7</div></td>
<td><div align="center">测试7</div></td>
<td><div align="center">测试7</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="8" />
</div>
</td>
<td><div align="center">测试8</div></td>
<td><div align="center">测试8</div></td>
<td><div align="center">测试8</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="9" />
</div>
</td>
<td><div align="center">测试9</div></td>
<td><div align="center">测试9</div></td>
<td><div align="center">测试9</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="10" />
</div>
</td>
<td><div align="center">测试10</div></td>
<td><div align="center">测试10</div></td>
<td><div align="center">测试10</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="11" />
</div>
</td>
<td><div align="center">测试11</div></td>
<td><div align="center">测试11</div></td>
<td><div align="center">测试11</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="12" />
</div>
</td>
<td><div align="center">测试12</div></td>
<td><div align="center">测试12</div></td>
<td><div align="center">测试12</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="13" />
</div>
</td>
<td><div align="center">测试13</div></td>
<td><div align="center">测试13</div></td>
<td><div align="center">测试13</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="14" />
</div>
</td>
<td><div align="center">测试14</div></td>
<td><div align="center">测试14</div></td>
<td><div align="center">测试14</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="15" />
</div>
</td>
<td><div align="center">测试15</div></td>
<td><div align="center">测试15</div></td>
<td><div align="center">测试15</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="16" />
</div>
</td>
<td><div align="center">测试16</div></td>
<td><div align="center">测试16</div></td>
<td><div align="center">测试16</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="17" />
</div>
</td>
<td><div align="center">测试17</div></td>
<td><div align="center">测试17</div></td>
<td><div align="center">测试17</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="18" />
</div>
</td>
<td><div align="center">测试18</div></td>
<td><div align="center">测试18</div></td>
<td><div align="center">测试18</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="19" />
</div>
</td>
<td><div align="center">测试19</div></td>
<td><div align="center">测试19</div></td>
<td><div align="center">测试19</div></td>
</tr>
</table>
<script>
$("#all").click(function () {
if (this.checked) {
$("#list :checkbox").prop("checked", true);
} else {
$("#list :checkbox").prop("checked", false);
}
});
$("#selectAll").click(function () {
$("#list :checkbox,#all").prop("checked", true);
});
$("#unSelect").click(function () {
$("#list :checkbox,#all").prop("checked", false);
});
$("#reverse").click(function () {
$("#list :checkbox").each(function () {
$(this).prop("checked", !$(this).prop("checked"));
});
allchk();
});
$("#getValue").click(function () {
var vals = "";
$("#list :checkbox").each(function () {
if ($(this).prop("checked") == true) {
vals += $(this).val() + ",";
}
});
alert(vals);
});
$("#list :checkbox").click(function () {
allchk();
});
function allchk() {
var chknum = $("#list :checkbox").size();//选项总个数
var chk = 0;
$("#list :checkbox").each(function () {
if ($(this).prop("checked") == true) {
chk++;
}
});
if (chknum == chk) {//全选
$("#all").prop("checked", true);
} else {//不全选
$("#all").prop("checked", false);
}
}
</script>
jquery checkbox全选 获取值的更多相关文章
- jquery checkbox全选,全不选,反选方法,jquery checkbox全选只能操作一次
jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...
- jquery 全选获取值
首选区分一下prop与attr的差别.prop是固有属性,attr自定义属性. $("#all").click(function () {//全选.反选 if(this.check ...
- jQuery checkbox 全选
jQuery 1.6版本以后 if($("#id").attr("checked")) 不能返回 ture 和 false 高版本中jQuery 提供prop ...
- jQuery checkBox 全选的例子
表单处理时经常会有全选的功能,但是这个功能往往会被忽视一个细节,就是逐个选中 checkBox 直至全选时,经常会忘记修改全选 checkBox 的状态,某知名互联网公司的网盘就会出现这样的问题,问题 ...
- jQuery --checkbox全选和取消全选简洁高效的解决办法
最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...
- jquery checkbox 全选反选代码只能执行一遍,第二次就失败
遇到问题背景: 在写到购物车的全选交互的时候,商品选中的状态只有在第一次的时候可以,第二次就无法选中:(代码如下) $(".chooseall").click(function() ...
- jquery checkbox 全选、取消全选
$("#checkall").click(function(){ $("input[name='uid']").prop("checked" ...
- jQuery checkbox全选 和全部取消
1.chkAll选中,全部chk选中 ,chkAll取消选中,全部chk取消选中 //chkAll选中,全部chk选中 ,chkAll取消选中,全部chk取消选中 $("#chkAll&q ...
- JQuery checkbox全选多次点击后无效解决方法
1. jquery设置checkbox时: <input type="checkbox" id="ckAll"/> $(function(){ va ...
随机推荐
- boost锁的使用
boost锁的概述 boost库中提供了mutex类与lock类,通过组合可以轻易的构建读写锁与互斥锁. ▲ mutex对象类 mutex类提供互斥量,主要有两种:boost::mutex,b ...
- gnome3 no launcher
http://askubuntu.com/questions/43246/how-to-configure-gnome-3-to-show-icons-on-desktop http://superu ...
- switch条件语句规则
- mac 剪切文件
首先选中文件,按Command+C复制文件:然后按Command+Option+V:就可以把你的文件剪走了!在这里补充一下,我这里讲的是剪切文件夹,不是剪切文本和文字!Command+X只能剪切文字文 ...
- nginx 红黑树详解
1 介绍 这部分终于整理完了,太耗时间了,留下来备忘吧! 之前看STL源码时,只是研究了红黑树的插入部分.在stl源码剖析的书中,也没有涉及到删除操作的分析,这次对删除操作也进行了详细的研究, 并且还 ...
- Apache 隐藏入口文件 index.php
新建 .htaccess文件至站点目录下,并写入如下代码: RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQ ...
- [Unity WWW] 跨域访问解决方法
什么是跨域访问 域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust Relation).信任关系是连接在域与域之间的桥梁.当一个域与其他域建立了信任 ...
- MAP--复杂map结构的构造
我的关键结构比如 struct{ int a; int b; int c; }s: 因为这三个数据是基本信息,可以唯一区别一个设备.拿这样一个数据结构作为索引就能找到每个设备. ...
- js 截取字符串里的ip
var ip_reg = /([\d\.]*)/ig; ip = ip_reg.exec(str); return ip; ip_reg会截取 '(' 开始的字符串,中间包含数字和 '.' .
- 自适应网页设计/响应式Web设计
zccst转 很早就有人设想,能不能”一次设计,普遍适用”,让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)? 一.”自适应网页设计”的概念 2010年,Ethan Ma ...