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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
解决vue组件中click事件失效的问题
Nov 09 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
Yii rules常用规则示例
2016/03/15 PHP
如何打开php的gd2库
2017/02/09 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
美发店5.1活动方案
2014/01/24 职场文书
创意婚礼策划方案
2014/05/18 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
大学生就业意向书
2015/05/11 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
安全第一课观后感
2015/06/18 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
python基础之类属性和实例属性
2021/10/24 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技