用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实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
jQuery取id有.的值的方法
May 21 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
Vue仿支付宝支付功能
May 25 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
vue-cli设置publicPath小记
Apr 14 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
详解Vue的列表渲染
Nov 20 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 ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
python实现一个猜拳游戏
2020/04/05 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
python设置中文界面实例方法
2020/10/27 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
工业设计毕业生自荐信
2014/04/13 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
2015年党性分析材料
2014/12/19 职场文书
介绍信的格式
2015/01/30 职场文书
煤矿安全保证书
2015/02/27 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
七年级思品教学反思
2016/02/20 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
详解Java实践之建造者模式
2021/06/18 Java/Android
JS setTimeout与setInterval的区别
2022/04/20 Javascript