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获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
基于jquery的一个浮动框(扩展性比较好 )
Aug 27 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 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
如何使用动态共享对象的模式来安装PHP
2006/10/09 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
js实现拖拽效果
2015/02/12 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python入门篇之对象类型
2014/10/17 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
python matlibplot绘制3D图形
2018/07/02 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
python开根号实例讲解
2020/08/30 Python
COSETTE官网:奢华,每天
2020/03/22 全球购物
大学生职业规划书的范本
2014/02/18 职场文书
结婚保证书范文
2014/04/29 职场文书
售后客服工作职责
2014/06/16 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
检讨书范文大全
2015/05/07 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
Python实现视频自动打码的示例代码
2022/04/08 Python