jQuery 实现简单全选、全不选、反选

原创 2015年07月08日 09:17:50

jQuery 实现简单全选、全不选、反选


<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>全选、全不选、反选</title>
	<style>
	</style>
</head>
<body>
	<div id="checkbox">
		<input type="checkbox">吃
		<input type="checkbox">喝
		<input type="checkbox">玩
		<input type="checkbox">乐
	</div>
	<div id="btn">
		<input type="button">全选
		<input type="button">全不选
		<input type="button">反选
	</div>


<script src="http://libs.baidu.com/jquery/1.7.0/jquery.js"></script>
<script>
	var checkAll = $('#btn>input').eq(0);
	var checkNone = $('#btn>input').eq(1);
	var checkReverse = $('#btn>input').eq(2);
	var checkbox = $('#checkbox>:checkbox');

	checkAll.click(function(){
		checkbox.attr('checked',true)
	})
	checkNone.click(function(){
		checkbox.attr('checked',false)
	})
	checkReverse.click(function(){
		checkbox.each(function(){
			$(this).attr('checked',!$(this).attr('checked'));
		});
	});
</script>
</body>
</html>
.....................................

版权声明:转载需注明出处

相关文章推荐

JQuery实现全选、全不选和反选功能

项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候,心想很简单的一个功能,几行代码就能搞定,然而事实并非如此。下面就把我的思路说一下: 1、当点击'全选'按钮时,页面中所有的复选框都应...

jQuery的CheckBox全选反选时,勾选失效的问题

在做复选框的时候,全选、反选应该是比较常用的功能。我在做这个功能时,发现多次全选、反选之后,页面展示的“勾选”效果失败了,页面上没有展示出勾选效果。但是追踪js,发现已经是选中状态。        ...

jquery全选,jquery全不选,jquery反选

全选,不全选,反选 $(function () { $("#selectAll").click(function () {//全选 ...
  • hexytxl
  • hexytxl
  • 2011年08月26日 10:40
  • 60662

Jquery之实现全选反选功能

开心一笑汤普森:“夫人,你刚去世的丈夫是我最亲密的朋友,希望你能送我一件他的遗物,让我永久保存以作纪念。” 艾丽斯:“仁慈的上帝啊,除了我本人外,我丈夫什么也没留下。”提出问题如何用Jquery实现...

利用jQuery完成全部选中,只要一个没选中全选按钮就不选中功能

test.html --> 选项1 选项2 选项3 选项4 选项5 全选 ...

jQuery全选全不选第二次失效问题解决办法

在使用jQuery改变CheckBox选中和不选中的时候,使用了下面语句改变: $("[name = shoppingCurtList]:checkbox").attr("checked", tru...
  • ILV_XJ
  • ILV_XJ
  • 2017年06月05日 17:07
  • 458

jQuery实现全选、全不选和反选,没有只能选一次的bug

学习到用.attr设置checked属性时出现全选只能实现一次的效果(关键是作业必须用button做)。。很郁闷。。终于找到解决的办法啦: 第一个比较不常用 的用button来做得全选全不选和反选按钮...

Jquery实现全选中全不选中以及获取选中行的相关值

$('body').on('click', 'input[type=checkbox][name=selectAll]', function(){ var chkall = $(this)...

HTML_jQuery中关于this的理解(复选框的全选,全不选,反选)

yoyo $(function(){ $("#selectAll").click( //全选~~~全不选 function(){ //thi...

jQuery实现表单全选、全不选以及反选的功能

本文主要介绍了利用jQuery实现表单的全选、全不选以及反选的功能。对如下的form表单: 请选择想要学习的编程语言: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery 实现简单全选、全不选、反选
举报原因:
原因补充:

(最多只允许输入30个字)