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 相关文章推荐
JavaScript 一道字符串分解的题目
Aug 03 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
比较node.js和Deno
Apr 27 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
索尼ICF-SW100收音机评测
2021/03/02 无线电
php车辆违章查询数据示例
2016/10/14 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
在Python的Django框架中加载模版的方法
2015/07/16 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
python中的变量如何开辟内存
2018/06/26 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
详解python的super()的作用和原理
2020/10/29 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
生物制药专业求职信
2014/03/11 职场文书
剪彩仪式主持词
2014/03/19 职场文书
校庆标语集锦
2014/06/25 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
2014年仓库工作总结
2014/11/20 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
go xorm框架的使用
2021/05/22 Golang
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript