jquery 实现checkbox全选,反选,全不选等功能代码(奇数)


Posted in Javascript onOctober 24, 2012

设页面有如下一组复选框和几个相关按钮(全选,反选,全不选等):

<input type="checkbox" name="fruit" value="apple" />苹果 
<input type="checkbox" name="fruit" value="orange" />橘子 
<input type="checkbox" name="fruit" value="banana" />香蕉 
<input type="checkbox" name="fruit" value="grape" />葡萄 
<input type="button" id="btn1" value="全选"> 
<input type="button" id="btn2" value="全不选"> 
<input type="button" id="btn3" value="反选"> 
<input type="button" id="btn4" value="选中所有奇数"> 
<input type="button" id="btn5" value="获得选中的所有值">

则分别实现相关功能的完整代码如下:
$(function(){ 
$('#btn1').click(function(){//全选 
$("[name='fruit']").attr('checked','true'); 
}); 
$('#btn2').click(function(){//全不选 
$("[name='fruit']").removeAttr('checked'); 
}); 
$('#btn3').click(function(){//反选 
$("[name='fruit']").each(function(){ 
if($(this).attr('checked')){ 
$(this).removeAttr('checked'); 
}else{ 
$(this).attr('checked','true'); 
} 
}) 
}); 
$("#btn4").click(function(){//选中所有奇数 
$("[name='fruit']:even").attr('checked','true'); 
}) 
$("#btn5").click(function(){//获取所有选中的选项的值 
var checkVal=''; 
$("[name='fruit'][checked]").each(function(){ 
checkVal+=$(this).val()+','; 
}) 
alert(checkVal); 
}) 
});

注意使用 jquery 之前必须要引入 jquery 包哦!
Javascript 相关文章推荐
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
Node.js使用Angular简单示例
May 11 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 #Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 #Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 #Javascript
关于js new Date() 出现NaN 的分析
Oct 23 #Javascript
js Dialog 实践分享
Oct 22 #Javascript
JS控件的生命周期介绍
Oct 22 #Javascript
重写javascript中window.confirm的行为
Oct 21 #Javascript
You might like
php根据生日计算年龄的方法
2015/07/13 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
Python代理抓取并验证使用多线程实现
2013/05/03 Python
在python中的socket模块使用代理实例
2014/05/29 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
python实现桌面壁纸切换功能
2019/01/21 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
如何在django中实现分页功能
2020/04/22 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
Python实现上下文管理器的方法
2020/08/07 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
个人借款担保书
2014/04/02 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
2015年女工委工作总结
2015/07/27 职场文书
行为习惯主题班会
2015/08/14 职场文书