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 相关文章推荐
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
python获取本地计算机名字的方法
2015/04/29 Python
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Django视图和URL配置详解
2018/01/31 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
如何强制垃圾回收
2015/10/06 面试题
总经理职责范文
2013/11/08 职场文书
事业单位接收函
2014/01/10 职场文书
行政主管职责范本
2014/03/07 职场文书
企业标语口号
2014/06/10 职场文书
消防志愿者活动方案
2014/08/23 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
Python中的程序流程控制语句
2022/02/24 Python
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技