• 广东清远垃圾收集点火灾致9人死亡 系烟花爆竹引起 2018-02-22
  • 党务问答:党组与党委有何区别? 2018-02-21
  • 杨浦区贯彻实施长护险 春节加班满足老人护理需求 2018-02-21
  •  “不打烊”不等于“全配送” 快递如何保障春节网购 2018-02-21
  • 冬奥观察:奥林匹克在“云”间 2018-02-20
  •  “不打烊”不等于“全配送” 快递如何保障春节网购 2018-02-20
  • 开创生态文明新时代 绘出美丽中国新图景 2018-02-20
  • 人民网驻阿尔及利亚记者报道集 2018-02-19
  • 党务问答:党组与党委有何区别? 2018-02-19
  • MINI车联网服务3月起升级至4G网络 增加新功能 2018-02-18
  • 以色列警方:已有足够的证据可以用于起诉以总理 2018-02-18
  • 冬奥会短节目第四 金博洋:伤病令我更强大 2018-02-18
  • 天津市北辰区委书记冯卫华:强化政治担当 把主体责任落实落细 2018-02-17
  • 正月初一客流继续回落 全国铁路预计发送旅客389万人次 2018-02-17
  • 送别余光中:诗人虽远行,乡愁永流传 2018-02-17
  • jquery 实现全选,反选,全不选等功能

    栏目: 编程语言 发布于: 2014-05-04 10:20:27

    jquery 实现全选,反选,全不选等功能,下面直接以例子进行说明。

    设页面有如下一组复选框和几个相关按钮(全选,反选,全不选等):

    <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 包哦!

    您可能感兴趣的文章

    • 禁止网页右键、复制、另存为、查看源文件等功能实现网页源代码?;?/li>
    • javascript判断鼠标左右键点击-兼容ie、firefox、chrome等各大主流浏览器
    • FckEditor添加右键菜单-图片删除功能
    • javascript实现截取字符串功能总结(包括使用Js截取中文字符的介绍)
    • 运行代码预览代码,代码另存为,复制代码功能的实现
    • js屏蔽鼠标键盘事件(包括鼠标右键,方向键,退格键,F5刷新键等),兼容IE和firefox
    • 利用js禁止浏览器直接选择复制文章内容的办法
    • javascript判断复选框是否选中
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:jquery 实现全选,反选,全不选等功能
    IT技术书籍推荐:
    PHP从入门到精通(第3版)
    PHP从入门到精通(第3版)
    明日科技 (作者)
    《PHP从入门到精通(第3版)》从初学者角度出发,通过通俗易懂的语言、丰富多彩的实例,详细介绍了使用PHP进行网络开发应该掌握的各方面技术。全书共分4篇25章,包括初识PHP、PHP环境搭建和开发工具、PHP语言基础、流程控制语句、字符串操作、正则表达式、PHP数组、PHP与Web页面交互、PHP与JavaScript交互、日期和时间、Cookie与Session、图形图像处理技术、文件系统、面向对象、PHP加密技术、MySQL数据库基础、phpMyAdmin图形化管理工具、PHP操作MySQL数据库、PDO数据库抽象层、ThinkPHP框架、Smarty模板技术、PHP与XML技术、PHP与Ajax技术、应用Smarty模板开发电子商务网站、应用ThinkPHP框架开发明日导航网等内容。书中所有知识都结合具体实例进行介绍,涉及的程序代码均附以详细的注释,可以使读者轻松领会PHP程序开发的精髓,快速提高开发技能。