• 新华保险广西分公司2017年理赔7677万元 2018-08-21
  • 首创集团打造京津冀协同发展新样本 2018-08-21
  • 共商共治共享 建设美丽长三角 2018-08-21
  • 晋金所交易大厅正式启动运营 2018-08-21
  • 南昌遭遇入汛以来首次大范围降雨 2018-08-21
  • 特朗普将提名新任白宫国家经济委员会主任 2018-08-21
  • 城镇调查失业率:触摸就业市场真实“温度” 2018-08-20
  • 许昌市获批国家居家和社区养老服务改革试点 2018-08-20
  • 我国高端芯片研制已具备基础 2018-08-20
  • 遭爆校长任期炒高房价请假率高 吴茂昆:旧案重提悖离事实 2018-08-19
  • 2018年洗衣机市场健康洗产品已成市场新引擎 2018-08-19
  • 大学毕业生创业“修手机” 两个月进账超30万元 2018-08-19
  • 張近東代表建議,用AI、區塊鏈技術打造數據安全“護城河” 2018-08-18
  • 清明忆先烈 习近平这样传承“红色基因” 2018-08-18
  • 第二届福建省大学生文化创新创意大赛落幕 2018-08-18
  • 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程序开发的精髓,快速提高开发技能。