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实现广告漂浮效果的小例子
Jul 02 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
javascript实现扫雷简易版
Aug 18 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 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
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
JavaScript面向对象编程
2008/03/02 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
sails框架的学习指南
2014/12/22 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
python比较两个列表大小的方法
2015/07/11 Python
Python编写一个优美的下载器
2018/04/15 Python
django迁移数据库错误问题解决
2019/07/29 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
美国时尚女装在线:Missguided
2016/12/03 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
描述RIP和OSPF区别以及特点
2015/01/17 面试题
中专生自荐信
2013/10/12 职场文书
医学生自荐信
2013/12/03 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
满月酒主持词
2014/03/27 职场文书
安全目标管理责任书
2014/07/25 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
婚宴父亲致辞
2015/07/27 职场文书
Python使用openpyxl模块处理Excel文件
2022/06/05 Python