用JQuery实现全选与取消的两种简单方法


Posted in Javascript onFebruary 22, 2014

用JQUERY实现全选和取消全选,没有js那么繁琐,而且支持更多浏览器。

<mce:script type="text/javascript"><!--$(function() {  
    $("#checkall").click(function() {  
        $("input[@name='checkname[]']").each(function() {  
            $(this).attr("checked", true); 
        }); 
    }); 
    $("#delcheckall").click(function() {  
        $("input[@name='checkname[]']").each(function() {  
            $(this).attr("checked", false); 
        }); 
    }); 
}); 
// --></mce:script> 
<input type='checkbox' id='id1' name='checkname[]' value='1' />value1  
<input type='checkbox' id='id2' name='checkname[]' value='2' />value2 
<input type='checkbox' id='id3' name='checkname[]' value='3' />value3 
<input type="button" id="checkall" name="checkall" value="全选" /> 
<input type="button" id="delcheckall" name="delcheckall" value="取消全选" />

更加简单的一种:
$("#checkall").click( 
  function(){ 
    if(this.checked){ 
        $("input[name='checkname']").attr('checked', true)
    }else{ 
        $("input[name='checkname']").attr('checked', false)
    } 
  } 
);
Javascript 相关文章推荐
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
jquery实现checkbox 全选/全不选的通用写法
Feb 22 #Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 #Javascript
jquery中load方法的用法及注意事项说明
Feb 22 #Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 #Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 #Javascript
文本框水印提示效果的简单实现代码
Feb 22 #Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 #Javascript
You might like
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
php测试kafka项目示例
2020/02/06 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
django之session与分页(实例讲解)
2017/11/13 Python
django 信号调度机制详解
2019/07/19 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
django在开发中取消外键约束的实现
2020/05/20 Python
Linux机考试题
2015/07/17 面试题
计算机专业个人简短的自我评价
2013/10/23 职场文书
车间班组长岗位职责
2013/11/13 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
退休欢送会致辞
2015/07/31 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
Python入门之基础语法详解
2021/05/11 Python
如何利用python实现列表嵌套字典取值
2022/06/10 Python