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 相关文章推荐
jquery中的事件处理详细介绍
Jun 24 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
WebPack工具运行原理及入门教程
Dec 02 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
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
node.js express中app.param的用法详解
2017/07/16 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
vue中监听返回键问题
2019/08/28 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
在主流系统之上安装Pygame的方法
2020/05/20 Python
python实现二分查找算法
2020/09/18 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
python实现发送邮件
2021/03/02 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
演讲主持词
2014/03/18 职场文书
难忘的一课教学反思
2014/04/30 职场文书
工程材料采购方案
2014/05/18 职场文书
校园活动策划方案
2014/06/13 职场文书
公司员工活动策划方案
2014/08/20 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
美术教师个人总结
2015/02/06 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python
Golang数据类型和相互转换
2022/04/12 Golang