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发布错误的详细介绍
Aug 02 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 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框架的性能
2008/01/10 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
JavaScript Split()方法
2015/12/18 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
生物科学专业个人求职信范文
2013/12/05 职场文书
关于旷工的检讨书
2014/02/02 职场文书
超市周年庆活动方案
2014/08/16 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
授权委托书
2015/01/28 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android