jquery实现checkbox全选和全部取消,以及获取值
在后台管理中经常会遇到列表全选和取消的功能,如评论审核、申请等,用到的html标记就是checkbox。我用的是mysql数据库,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选和取消全选</title>
</head>
<body>
<table>
<!-- 这里用整形的数字编号作为值-->
<tr><td><input type="checkbox" class="check" value="1"/>苹果</td></tr>
<tr><td><input type="checkbox" class="check" value="2"/>梨子</td></tr>
<tr><td><input type="checkbox" class="check" value="3"/>橘子</td></tr>
<tr><td><input type="checkbox" class="check" value="4"/>香蕉</td></tr>
<tr><td><input type="checkbox" class="check" value="5"/>番茄</td></tr>
<tr><td><input type="checkbox" class="check" value="6"/>黄瓜</td></tr>
<tr><td><input type="checkbox" class="check" value="7"/>土豆</td></tr>
<tr><td><input type="checkbox" class="check" value="8"/>莲藕</td></tr>
<tr><td><input type="checkbox" id="choose"/>全选/取消</td><td id="do_choose">确定</td></tr>
</table>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
//全选和取消
$('#choose').click(function(){
if($(this).attr('checked') == 'checked'){//全选
$('input.check').attr('checked', 'checked');
}else{//取消全选
$('input.check').removeAttr('checked');
}
}); //获取选择的值
$('#do_choose').click(function(){
var test = $('input.check:checked');
console.log(test);
if(test.length == 0){
alert('请选择!');
}else{
var str = '';
test.each(function(i){
if(i == 0){
str += parseInt($(this).val()); //需要将获取到的字符串值转为整数,下同
}else{
str += ',' + parseInt($(this).val());
}
});
alert(str);//这里是获取到的数据,连接成','隔开的字符串是为了方便数据库使用'in'关键字。
}
});
</script>
</body>
</html>
jquery实现checkbox全选和全部取消,以及获取值的更多相关文章
- jquery中checkbox全选失效的解决方法
这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...
- jQuery实现CheckBox全选、全不选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery设置checkbox全选(区别jQuery版本)
jQuery设置checkbox全选在网上有各种文章介绍,但是为什么在我们用他们的代码的时候就没有效果呢? 如果你的代码一点错误都没有,先不要急着怀疑人家代码的正确性,也许只是人家跟你用的jQuery ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- Jquery 组 checkbox全选checkbox
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- Jquery实现checkbox全选、取消全选和反选
最近在看廖雪峰的Jquery教程,事件篇的练习题比较综合,研究了很久终于研究出来了,现在分享出来,提供给小白学习.题目如下: 首先要获取到全选checkbox和每一项的checkbox,然后通过逻辑代 ...
- jQuery checkbox全选 和全部取消
1.chkAll选中,全部chk选中 ,chkAll取消选中,全部chk取消选中 //chkAll选中,全部chk选中 ,chkAll取消选中,全部chk取消选中 $("#chkAll&q ...
- 解决jquery操作checkbox全选全不选无法勾选问题
最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...
- jquery的checkbox 全选和全不选
今天写了一个checkbox的全选和全不选的功能: var check_all=function(){ if(this.checked){ //alert($(".adv_check_num ...
随机推荐
- Less环境搭建
1.在页面中加入 .less 样式表的链接,并将 rel 属性设置为 "stylesheet/less": <link rel="stylesheet/less&q ...
- Ubuntu 12.04 Virtualbox 启用USB 设备支持
转载自:http://www.cnblogs.com/ericsun/archive/2013/06/10/3130679.html 具体步骤在上面的链接中 今天在ubuntu下安装了Virtualb ...
- css Animation初体验
目前有越来越多的网站都使用animation,无论他们是用GIF,SVG,WebGL,视频背景或者其他形式展示.适当地使用动画会让网站更生动,互动性更好,为用户增加一个额外的反馈和体验层. 在本教程中 ...
- HackPwn2015:IoT智能硬件安全威胁分析
HackPwn2015:IoT智能硬件安全威胁分析 360安全卫士 · 2015/08/26 14:43 IoT(物联网)是一种既危险又有趣的混合技术,所谓的混合技术包括移动应用程序.蓝牙.Wi-Fi ...
- Linux时间设置及同步
Linux系统安装时选择的UTC时间是国际标准时间,而中国处于UTC+8时区,因此安装系统时不要选择UTC时区. 还有就是Linux有两个时钟: 1.Bios时钟及硬件时间 2.Kernel时钟及系统 ...
- Linux SHELL,环境变量
SHELL: 在计算机科学中,Shell俗称壳(用来区别于核),是指"提供使用者使用界面"的软件(命令解析器).它类似于DOS下的command和后来的cmd.exe.它接收用户命 ...
- C语言局部变量和全局变量的区别。——Arvin
局变量是使用相同的内存块在整个类中存储一个值. 全局变量的存在主要有以下一些原因: 1,使用全局变量会占用更多的内存(因为其生命期长),不过在计算机配置很高的今天,这个不成为什么问题,除非使用的是巨 ...
- Baltic2008联合内阁
Description N个政党要组成一个联合内阁,每个党都有自己的席位数. 现在希望你找出一种方案,你选中的党的席位数要大于总数的一半,并且联合内阁的席位数越多越好. 对于一个联合内阁,如 ...
- 开发微信小程序 中遇到的坑 及解决方法
1.wx.request 只能访问 https 解决: 新建项目 不填appid 即可访问 localhost 2.页面中多重三元表达式 解析有问题 解决: <!--{{index}} { ...
- SSH网上答题系统质量属性
我要做的事网上答题系统,通过注册登录到答题页面. 这其中数据库的连接靠Hibernate,数据库的增删改查用Sruts2实现. 关于Struts2的学习,仅仅在action的表面上,可以在action ...