jquery一句话全选/取消全选


Posted in Javascript onMarch 01, 2011

1、当然要引入jquery文件啦。
2、建立函数
var check_all = function(obj,name){$(":checkbox[name='"+name+"']").attr("checked",obj.checked); }
3、使用

<!DOCTYPE Html> 
<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
<script type="text/javascript"> 
function selectAll(checkbox) { 
$('input[type=checkbox]').attr('checked', $(checkbox).attr('checked')); 
} 
</script> 
</head> 
<body> 
<input type="checkbox" onclick="selectAll(this);" />全选<br/> 
<input type="checkbox" /><br/> 
<input type="checkbox" /><br/> 
<input type="checkbox" /><br/> 
<input type="checkbox" /><br/> 
<input type="checkbox" /><br/> 
<input type="checkbox" /><br/> 
…… 
</body> 
</html>

多组的JQUERY选中与取消
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
<script type="text/javascript"> 
function selectGroup(checkbox,obj) { 
$('input[name='+obj+']').attr('checked', $(checkbox).attr('checked')); 
} 
</script> 
</head> 
<body> 
<input type="checkbox" onclick="selectGroup(this,'grp1');" />选中GROUPA<br/> 
GROUPA:<br/> 
<input type="checkbox" name="grp1" />11<br/> 
<input type="checkbox" name="grp1" />22<br/> 
<input type="checkbox" name="grp1" />33<br/><br/> 
<input type="checkbox" onclick="selectGroup(this,'grp2');" />选中GROUPB<br/> 
GROUPB:<br/> 
<input type="checkbox" name="grp2" />44<br/> 
<input type="checkbox" name="grp2" />55<br/> 
<input type="checkbox" name="grp2" />66<br/> 
</body> 
</html>

另外的补充代码:
引用Jquery 库jquery-1.4.1-vsdoc.js 等

Jquery脚本代码——————————————————————

$(function() { 
$('#inputCheck').click(function() { 
$("input[name='Checkbox1']").attr("checked", $(this).attr("checked")); 
}); 
}); // 全选 $(function() { 
$("#select_reverse").click(function() { 
$("input[name='Checkbox1']").each(function(idx, item) { 
$(item).attr("checked", !$(item).attr("checked")); 
}) 
}); 
});//反选

html 前台代码————————————————————————
[code]
<input id="inputCheck" type="checkbox" />全选
<input id="select_reverse" type="checkbox" />反选
<input name="Checkbox1" type="checkbox" />
<input name="Checkbox1" type="checkbox" />
<input name="Checkbox1" type="checkbox" />
<input name="Checkbox1" type="checkbox" />
<input name="Checkbox1" type="checkbox" />
<input name="Checkbox1" type="checkbox" />
[html]
Javascript 相关文章推荐
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
js编写选项卡效果
May 23 Javascript
node使用promise替代回调函数
May 07 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 #Javascript
jquery中实现标签切换效果的代码
Mar 01 #Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 #Javascript
收集的10个免费的jQuery相册
Feb 26 #Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 #Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 #Javascript
js对象的比较
Feb 26 #Javascript
You might like
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
详解vue-cli3使用
2018/08/14 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
js尾调用优化的实现
2019/05/23 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
python基础教程之常用运算符
2014/08/29 Python
python实现k-means聚类算法
2018/02/23 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
设计模式的基本要素是什么
2014/04/21 面试题
小学生安全教育广播稿
2014/10/20 职场文书
优秀护士事迹材料
2014/12/25 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
关于倡议书的范文
2015/04/29 职场文书
新生开学寄语大全
2015/05/28 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python