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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
vue构建单页面应用实战
Apr 10 Javascript
bootstrap表单示例代码分享
May 18 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
原生js实现贪吃蛇游戏
Oct 26 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文件上传类的分享
2017/07/06 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
python的schedule定时任务模块二次封装方法
2019/02/19 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
python如何快速生成时间戳
2020/07/21 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
活动总结怎么写
2014/04/28 职场文书
工作鉴定评语
2014/05/04 职场文书
演讲比赛策划方案
2014/06/11 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python