• 美好生活的价值追求和实现路径-社会关注-理论频道-中工网 2018-05-21
  • 保罗亲手为自己圆梦 火箭勇士双双会师西部决赛 2018-05-21
  • Floating production, storage and offloading vessel delivered in Qingdao 2018-05-20
  • 汽車定位跟蹤官員意圖敲詐 追蹤器該怎麼管 2018-05-20
  • 工作队精准发力助力贫困村“摘帽” 2018-05-20
  • 中消协发布榨汁机比较试验结果 2018-05-20
  • 游花海林芝,赏野生桃花 2018林芝桃花节29日开幕 2018-05-20
  • 19米99轻松卫冕 巩立姣:没突破20米有点可惜 2018-05-18
  • 海南省工商局出实招提高干部素质 强化工作作风 2018-05-18
  • 栾蕾英亮相TOP100时尚盛典 盛装亮相仙气十足 2018-05-18
  • 以合法形式掩盖非法目的的合同效力 2018-05-18
  • 4月解放领跑重卡行业 红岩保持增幅第一 2018-05-17
  • 不查“后来”,中国电影难有未来 2018-05-16
  • 欧盟公司与伊朗合作将遭美国制裁?德媒:欧美或渐行渐远 2018-05-16
  • 《青草的清香》:探索感官和情感的发展史 2018-05-16
  • 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程序开发的精髓,快速提高开发技能。