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 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
Javascript的this详解
Mar 23 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 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中上传大体积文件时需要的设置
2006/10/09 PHP
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
怎样写好自我鉴定
2013/12/04 职场文书
党员教师一句话承诺
2014/05/30 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
十佳家长事迹材料
2014/08/26 职场文书
2014年保育员工作总结
2014/12/02 职场文书
婚宴新郎致辞
2015/07/28 职场文书