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实现表头固定效果的实例代码
May 24 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
require.js的用法详解
Oct 20 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
vue组件实例解析
Jan 10 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
关于AngularJS中几种Providers的区别总结
May 17 Javascript
vant时间控件使用方法详解
Dec 24 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
php4的session功能评述(三)
2006/10/09 PHP
生成php程序的php代码
2008/04/07 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
php实现购物车功能(上)
2020/07/23 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
Python六大开源框架对比
2015/10/19 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
医药专业推荐信
2013/11/15 职场文书
超市客服工作职责
2014/06/11 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
入队仪式主持词
2015/07/04 职场文书
使用CSS设置滚动条样式
2022/01/18 HTML / CSS
centos7安装mysql5.7经验记录
2022/05/02 Servers
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android