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 URL传中文参数引发的乱码问题
Sep 02 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
小程序富文本提取图片可放大缩小
May 26 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实现图片简单上传
2006/10/09 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
Django 中 cookie的使用
2017/08/17 PHP
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
ubuntu中配置pyqt4环境教程
2017/12/27 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
Python continue语句实例用法
2020/02/06 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
python 5个实用的技巧
2020/09/27 Python
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
初中地理教学反思
2014/01/11 职场文书
医务人员自我评价
2014/01/26 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
带病坚持工作事迹
2014/05/03 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
酒店员工管理制度
2015/08/05 职场文书
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers