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 相关文章推荐
js类 from qq
Nov 13 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
官方推荐react-navigation的具体使用详解
May 08 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 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防攻击代码升级版
2010/12/29 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
Python psutil模块简单使用实例
2015/04/28 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
Python科学计算之Pandas详解
2017/01/15 Python
详解python3中tkinter知识点
2018/06/21 Python
python要安装在哪个盘
2020/06/15 Python
Django配置跨域并开发测试接口
2020/11/04 Python
python 下载文件的多种方法汇总
2020/11/17 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
医药销售求职信范文
2014/02/01 职场文书
收入证明范本
2015/06/12 职场文书
新闻稿标题
2015/07/18 职场文书
校园之声广播稿
2015/08/18 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
《观潮》教学反思
2016/02/17 职场文书