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不是基础的基础
Dec 24 Javascript
javascript Demo模态窗口
Dec 06 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 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程序的方法
2009/03/09 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
Javascript 中的类和闭包
2010/01/08 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
python共享引用(多个变量引用)示例代码
2013/12/04 Python
Python查看多台服务器进程的脚本分享
2014/06/11 Python
Python文件操作类操作实例详解
2014/07/11 Python
Python实现购物程序思路及代码
2017/07/24 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
python 贪心算法的实现
2020/09/18 Python
暇步士官网:Hush Puppies
2016/09/22 全球购物
什么是makefile? 如何编写makefile?
2013/01/02 面试题
公务员转正鉴定材料
2014/02/11 职场文书
幼儿教师培训感言
2014/03/08 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
大型活动组织方案
2014/05/10 职场文书
Python词云的正确实现方法实例
2021/05/08 Python