用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+xml技术实现分页浏览
Jul 27 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
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来检测proxy
2006/10/09 PHP
php中session退出登陆问题
2014/02/27 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
php框架知识点的整理和补充
2021/03/01 PHP
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
vue实现输入框自动跳转功能
2020/05/20 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python @property装饰器原理解析
2020/01/22 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
城管综合整治方案
2014/05/01 职场文书
2019各种承诺书范文
2019/06/24 职场文书
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
Vue深入理解插槽slot的使用
2022/08/05 Vue.js