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 相关文章推荐
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
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
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python相似模块用例
2016/03/04 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Python3多线程操作简单示例
2018/05/22 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
美国时尚在线:Showpo
2017/09/08 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
仓库班组长岗位职责
2013/12/12 职场文书
出生证明公证书
2014/04/09 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
出租房屋协议书
2014/09/14 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
小学教师教学反思
2016/02/24 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript