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 ...
随机推荐
- js 增删改查
<html><head lang="en"> <meta charset="UTF-8"> <title>< ...
- AMQP协议学习
参考这个:http://kb.cnblogs.com/page/73759/ 写的挺好 AMQP协议是一种二进制协议,提供客户端应用与消息中间件之间异步.安全.高效地交互.从整体来看,AMQP协议可划 ...
- Android Quick Tip - ADB over WiFi
http://stuffandtech.blogspot.jp/2012/03/android-quick-tip-adb-over-wifi.html MAR 26 Android Quick ...
- a标签的target的四个值
特殊的目标 有 4 个保留的目标名称用作特殊的文档重定向操作: _blank 浏览器总在一个新打开.未命名的窗口中载入目标文档. _self 这个目标的值对所有没有指定目标的 <a> 标签 ...
- http://www.linux-commands-examples.com/xmllint
http://www.linux-commands-examples.com/xmllint hen hao!
- HTML5 Canvas | w3cschool菜鸟教程
HTML5 Canvas <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.. 在画布上(Canvas)画一个红色矩形,梯度矩形,彩色矩形,和一些彩色的文字. ...
- unity3d热更新解决方案,使用ulua插件开发的框架。
ulua插件下载地址 www.ulua.org,下面要说的是ulua的开发框架. 首先是 LuaLoader 类,它负责把一个 lua 的 table 加载起来,使此 lua 的 table 像一个 ...
- echarts 系列一
由于近期项目需要做地图方便的可视化图标,经过比较最终选定echarts. echarts在可视化视图方面非常强大,可以满足大多数开发需求. 采用标签式引入js文件,引用的js 文件位置 echarts ...
- C#-WebForm-AJAX阿贾克斯(一)基本格式
AJAX 即" Asynchronous Javascript And XML "(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异 ...
- Android源码编译jar包BUILD_JAVA_LIBRARY 与BUILD_STATIC_JAVA_LIBRARY的区别(二)
上文简单介绍了BUILD_JAVA_LIBRARY 与BUILD_STATIC_JAVA_LIBRARY编译出来jar包的区别, 那么你如果拿到了一个内容是dex格式的jar包,而你又偏偏需要这个ja ...